position属性
拥有三种形式:
A.静态定位 (没有设置position属性的默认状态,元素依然处于标准文档流中)
B.相对定位
C.绝对定位
可设置四种属性值:
static(静态定位)
relative(相对定位)
absolute(绝对定位)---> 绝对定位
fixed(固定定位)--->绝对定位
相对定位:
相对自身原有位置进行偏移
仍处于标准文档流中
随即拥有了偏移属性和z-index属性
绝对定位:
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有了偏移属性和z-index属性
未设置偏移量:
无论是否存在已定位的祖先元素,都保持在元素初始位置。
脱离标准文档流。设置了绝对定位,但是未设置宽度,显示宽度会随着内容变化而变化。
设置了偏移量:
偏移参照基准:
1.没有已经定位的祖先元素
以html为参照基准(不是body节段)
2.有已经定位的祖先元素
就近原则
通过定位实现横向两列布局:
常用于一列固定宽度,一列自适应宽度。
常用方式: 父级元素相对定位,自适应元素绝对定位。
注意:
固定宽度的列一定要高于自适应宽度的高度。
原文地址:http://www.cnblogs.com/goupb/p/3798370.html