关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:

语法:

position: relative | absolute

relative:
对象遵循常规流,而且參照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的不论什么元素。
absolute:
对象脱离常规流。使用toprightbottomleft等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。

说明:

当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)

当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。

备注:position: absolute时。leftrighttopbottom至少指定其一,对象可层叠。层叠通过z-index属性定义。

position: relative时对象不可层叠

css position: relative,absolute具体解释的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  4. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  7. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

随机推荐

  1. mysql 存储过程 演示样例代码

    drop procedure if exists P_SEQUENCE; /** 暂省略包 @AUTO LIANGRUI 2014/6/27 T_PRO_PRODUCT 表 排序 对整个表进行按序号排 ...

  2. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 系统重装 Windows_VHD_辅助处理工具说明文档1

    菜鸟也玩 VHD Windows VHD 辅助处理工具是一个用于创建.安装.维护 VHD 的辅助工具,把一个比较复杂的操作过程傻瓜化,使您轻松体验 VHD 的强大功能.您需要预备的就是一个准备装入 V ...

  4. 使用Cocos studio创建一个简单的project

    前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...

  5. Android下关于消息的推送(9.10)

    1 http://developer.baidu.com/wiki/index.php?title=docs/cplat/push/api  百度云推送 2 http://blog.csdn.net/ ...

  6. MVC组件分析

    MVC组件分析   2 System.Web.Mvc V 4.0.0.0 组件分析 2.1 Routing组件(路由选择) Routing的作用就是负责分析Url Action的要求• 必须是一个公有 ...

  7. firewalld实现网关功能

    用ip a查看自己的路由服务器接口,一个外网接口 wan ,还有内网接口: 我这里是一块网卡,配了一个虚拟ip,eth0: wan口   eth0:1 lan口 注意:要注意顺序,先将接口加到zone ...

  8. 基于多输出有序回归的年龄识别(CVPR_2016)

    作为学习记录,将所做PPT摘录如下: 网络结构: 网络结构描述: 网络工作流程: 损失函数计算: 亚洲人脸数据集: 参考代码:

  9. javascript 温故而知新 getBoundingClientRect

    getBoundingClientRect获取元素位置  getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClient ...

  10. OpenCV for Python 学习笔记 三

    给源图像增加边界 cv2.copyMakeBorder(src,top, bottom, left, right ,borderType,value) src:源图像 top,bottem,left, ...