揭开CSS的绝对定位真实的面纱（二）

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。





需要注意一下几点：

1.要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

1 <div class="box1"> → 相对定位 2 <div class="box2"> → 没有定位 3 <p></p> → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 4 </div> 5 </div>

1 <div class="box1"> → 相对定位 2 <div class="box2"> → 相对定位 3 <p></p> → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 4 </div> 1 </div>

2.不一定是相对定位，任何定位，都可以作为参考点

1 <div> → 绝对定位 2 <p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。 3 </div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱离标准刘，儿子脱离标准流在父亲的范围里面移动。

1 <div class=”box1”> → 绝对定位 2 <div class=”box2”> → 相对定位 3 <div class=”box3”> → 没有定位 4 <p></p> → 绝对定位，以box2为参考定位。 5 </div> 6 </div> 7 </div>

3. 绝对定位的儿子，无视参考的那个盒子的padding。

下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。

p将无视父亲的padding，在border内侧为参考点，进行定位：