Css 从较低的z索引重叠元素

我在理解Javascript中div的重叠时遇到一些问题

看

正如你所看到的，绿色的盒子被另外两个包裹着。但是，一旦我向div1（红色框）添加z索引，它就不再工作了

---

有人能解释一下吗？为什么div1上的z-index为0会破坏此设置？

z-index属性指定元素的堆栈顺序

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素的前面

div3有更大的堆栈顺序，这就是为什么它在前面

如果以后向页面添加更多元素，则可以在不调整所有其他元素的z索引值的情况下将其分层。例如：

* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element

还可以为两个元素指定相同的z索引值。如果这些元素堆叠在一起，它们将按照在HTML中写入的顺序显示，最后一个元素位于顶部

可以为每个要分层的元素指定不同的z索引值。例如，如果我有五个不同的元素：

* element 1 — z-index of -25
* element 2 — z-index of 82
* element 3 — z-index not set
* element 4 — z-index of 10
* element 5 — z-index of -3

它们将按以下顺序堆叠：

要素2

要素4

要素3

要素5

要素1

---

您可能想了解堆叠上下文是如何生成的：。特别是，除非元素使用非自动的z索引定位，否则不会形成堆叠上下文。但一旦形成，整个元素（及其子元素）将遵循堆叠顺序，这就是为什么当div1的z-index为0时，绿色框会与其他框重叠。好的，我理解为什么它会像div1的z-index设置为0时那样。但它仍然无法解释为什么在div1上设置了z-index auto时会出现这种情况。我对这个例子做了一点修改：这里div3的堆叠顺序是什么？它是唯一一个具有z索引集的，但其行为就像所有3个都处于相同的堆栈顺序。这很清楚。更奇怪的是，div2可以被div1和div3包装起来。据我所知，它们的堆叠顺序不同。