Css 为什么z指数为：-1；出现在z索引上方：1；？

解释这种行为：

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

---

唯一的区别是第一个div设置了z-index:1。

将定位元素的设置为除

auto

（初始值）以外的任何值都会导致元素为其子体框生成新的堆叠上下文

这可以防止其任何子元素出现在其下方，包括

div:before

伪元素，即使它们的

z-index

为负。当然，任何具有负

z-index

的子体将继续出现在包含元素中具有零或正

z-index

的子体下方，但包含元素将始终位于最后面。1

没有

z-index

集的

div

元素的其余部分将使用初始值，因此不会为其伪元素生成堆叠上下文，从而允许伪元素显示在真实元素下方。绘制它们的堆叠上下文是

主体的堆叠上下文


1请注意，堆叠上下文根的内容仍将显示在具有负
z索引的子体的背景上方。这是有意的，在中有更详细的介绍，并提供了规范的相关链接