“子绝父相”能实现元素覆盖么？
Posted unuliha
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了“子绝父相”能实现元素覆盖么？相关的知识，希望对你有一定的参考价值。
当将父元素设置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中所有盒子在根盒子里挨个排列，当某个盒子被移出了文档流，其后面的盒子会填补其空缺，但不会影响其之前已经排列好的盒子的位置。
以上是关于“子绝父相”能实现元素覆盖么？的主要内容，如果未能解决你的问题，请参考以下文章