css - 从较低的 z-index 重叠元素

Question

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

参见 http://jsfiddle.net/CapKK/

如您所见，绿色盒子被另外两个盒子包裹着。但是，一旦我将 z-index 添加到 div1(红色框)，它就不再起作用了。

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

Answer 1

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

它们将按以下顺序堆叠:

1. 元素 2
2. 元素 4
3. 元素 3
4. 元素 5
5. 元素 1