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,会产生影响)

你可能感兴趣的:(CSS Postion之Absolute)