解释这个行为：
<div style="z-index: 1"></div> <div></div> <div></div> <div></div>
div {
position: relative;
background: red;
width: 100px;
height: 100px;
}
div:before {
position: absolute;
background: blue;
width: 100px;
height: 100px;
z-index: -1;
content: "";
left: -5px;
top: -5px;
}
唯一不同的是第一个div有z-index：1集.
解决方法
将定位元素的
z-index设置为除auto之外的任何值(初始值)会导致元素为其后代框生成新的堆叠上下文.
这可以防止它的任何后代出现在它下面,包括div：before伪元素,即使它们的z-index是负数.当然,任何具有负z-index的后代将继续出现在包含元素中具有零或正z-index的后代之下,但是包含元素的后代将始终位于后面.
没有z-index集的其余div元素将使用初始值,因此不会为其伪元素生成堆栈上下文,从而允许伪元素出现在真实元素下方.它们被绘制的堆叠上下文是身体的堆叠上下文.
1请注意,堆叠上下文根的内容仍将显示在具有负z-index的后代的背景上方.这是故意的,在this answer中有更详细的介绍,并附有规范的相关链接.
