1

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

见http://jsfiddle.net/CapKK/

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

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

4

1 回答 1

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

它们将按以下顺序堆叠：

  1. 元素 2
  2. 元素 4
  3. 要素 3
  4. 要素 5
  5. 元素 1
于 2011-01-27T13:22:51.830 回答