{转摘}理解 position:relative 与 position:absolute
|
转载：<a href="http://www.happyshow.org/article/125.html" target="_blank">
position 有三个值，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的概念(演示)。 |
absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那它们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？Absolute，CSS中的写法是：position:absolute; 它的意思是绝对定位，参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。Relative，CSS中的写法是：position:relative;
