我在理解Javascript中div的重叠时遇到了一些问题。
正如你所看到的那样，绿色盒子被其他两个包裹着。但是，只要我将一个z-index添加到div1（红色框），它就不再起作用了。
有人可以解释一下吗？为什么div1上的z-index为0会破坏这种设置？
答案 0 :(得分：2)
z-index属性指定元素的堆栈顺序。
堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。
div3具有更大的堆叠顺序，这就是为什么它在前面。
如果稍后向页面添加更多元素，则可以将其分层，而无需调整所有其他元素的z-index值。例如：
* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element
您还可以为两个元素提供相同的z-index值。如果这些元素是堆叠的，它们将按照HTML中编写的顺序显示，最后一个元素位于顶部。
您可以为您想要的每个元素分层不同的z-index值。例如，如果我有五个不同的元素：
* 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
他们将按以下顺序堆叠：