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

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

需要注意一下几点：

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

1

  →  相对定位

2

 →  没有定位

3   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素

4

5

1

  →  相对定位

2

 → 相对定位

3   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素

4

1

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

1

 → 绝对定位

2  → 绝对定位，将以div作为参考点。因为父亲定位了。

3

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

1

 → 绝对定位

2

 → 相对定位

3

 → 没有定位

4  → 绝对定位，以box2为参考定位。

5

6

7

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

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

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