理解 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 的概念