CSS Postion之Absolute

一直对CSS的Postion定位不是特别理解，今天做了一些实际测试，顺带总结一下：

1） Postion：absolute

绝对定位是相对于其包含块的。但是这个包含块不一定是其父元素，而是由自身一直上溯到定义了postion属性并且值不为static的祖先元素。比如以下div3的top：10是相对于div1的,而不是div2。

<div style="position:relative" id="div1">

    <div id="div2">

        <div id="div3" style="position:absolute;top:10px">div3</div>

   </div>

</div>

2） Postion：relative

首先说明一点，只定义了position：relative而没有指定top，left，bottom，right的元素 ，其自身的显示效果和不加position：relative是一样的。

当一个元素A定义了position：relative;top:10px时，其效果分两步来看：

a) 元素A的位置相对于不加position：relative;top:10px时，下移10px。

b)其他元素的位置相对于元素A不加position：relative;top:10px时的位置不变。即元素A定义的position：relative;top:10px不对其他元素产生影响。（当然，如果元素A底下有子元素且子元素定义了absolute，会产生影响）