理解 position:relative 与 position:absolute

理解 position:relative 与 position:absolute

有三个值，
static
（静态）、
relative
（相对）、
absolute
（绝对）；由于
static
是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。

对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：

子元素
B
可以通过
top
、
right
、
bottom
、
left
来精确定位，定位的参考目标就是其具有相对定位属性的父级元素
A
；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于
B
元素具有
absolute
定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了
z-index
（空间坐标系的
Z
轴）
属性，谁的值大，谁就在上面。另外，如果父级元素
A
没有设置
relative
，那么
B
元素就会以
body
标签当作参考点。

对于具有
position:relative
属性的元素
A
，其
top
、
right
、
bottom
、
left
四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有
relative
定位属性的父级元素或
body
作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸
(演示

)
。值得注意的是，此时元素
A
的
margin
，
margin
将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是
margin
与
top
、
right
、
bottom
、
left
共同作用后的位置，并且其周围元素的位置也将产生影响。

回过头来再看看
relative
里面的
absolute
，比如上面的
A
、
B
两个元素，如果两个元素都设置了
top
、
right
、
bottom
、
left
，对于元素
B
来说，其位置偏移的参考点是元素
A
偏移后的位置，不是元素
A
的原位置，同样，如果元素
B
有
margin
，其参考点也是元素
A
偏移后的位置，这点很重要，这才是
absolute
的概念