一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。
需要注意一下几点:
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内侧为参考点,进行定位: