当将父元素设置position: relative;
,子元素设置position: absolute;
时,能实现子元素覆盖在父元素上面。
<head>
<style>
.box1 {
position: relative;
background-color: greenyellow;
height: 50px;
width: 50px;
}
.box2 {
position: absolute;
background-color:aliceblue;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
浅色的子元素覆盖在绿色父元素上,以盒子左上角为顶点对齐元素。
为什么能实现覆盖呢?先看“子绝”,官方对于绝对定位定义如下:
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。
这里的最近的非 static 定位祖先元素
就是类名为box1
的div
(为方便描述,后续以父元素box1
称呼),子元素box2
被移出了文档流,其位置仅由最近的非 static 定位祖先元素box1
以及偏移
来确定,偏移
由left、right、top、bottom
指定,此处没有设置偏移,在默认left: 0; top:0;
的位置上。
那既然如此,“父相”的作用是什么呢?当不设置“父相”,且不显性设置父元素的position
时,会发现子元素box2
去找的父元素是 ICB(initial containing block,初始包含块,也就是根元素)。因为此时box1
的position
使用了默认值static
,box2
在找父元素的时候会跳过box1
,直接找到根元素。该行为官方解释如下:
绝对定位元素相对于最近的非
static
祖先元素定位。当这样的祖先元素不存在时,则相对于 ICB(initial containing block,初始包含块)。
也就是说,父元素的position
不一定要设置为relative
,只要不是static
,元素覆盖都能实现。
html
中所有盒子在根盒子里挨个排列,当某个盒子被移出了文档流,其后面的盒子会填补其空缺,但不会影响其之前已经排列好的盒子的位置。