KB012: 绝对定位( Absolute positioning )

KB012: 绝对定位( Absolute positioning )

示例代码：

  <div style="position:relative; 300px; height:300px; background-color:silver; border:5px solid red;">

     <div style="100px; height:100px; background-color:blue;"></div>


     <div style="margin:0 0 0 100px; 200px; height:200px; background-color:gold;">

          <div style="position:absolute; left:100px; top:100px; 100px; height:100px; background-color:green;">
        </div>


     </div>


 </div>

绝对定位元素完全脱离了常规流

绝对定位元素完全脱离了常规流³（对后继的兄弟节点没有影响）。

常规流中的框，都在同一个层上，浮动框是处于常规流之上的一个特殊层，它可能会对常规流中的框的定位产生影响。但绝对定位的框不会， 每个绝对定位的框都可以看做一个单独的图层，不会对其他层框的定位产生影响。这与层叠级别和层叠上下文¹有关。

有一点需要注意，那就是绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。

<div style="position:absolute; 100px; height:100px; background-color:red;"> absolute</div>
<div style="height:50px; border:1px solid blue; 200px;">DIV 中的普通文本元素</div> 

<div style="position:absolute; left:60px; 100px; height:100px; background-color:green;"> absolute</div>

两个绝对定位框中间的 DIV 在常规流中，影响了后面的绝对定位元素的位置，但没有受到其前面的绝对定位框的影响