为什么绿色 div 出现在红色 div 之上？

Question

在上面的代码笔中，我有 2 divs red 和 blue。使用 z-index 我们确保红色在蓝色之上，即使它在标记中出现在 blue 之前。

green 是 blue 的 child 和 9999 的 z-index。尽管它的 z-index 很高，但它应该被困在明显低于 red 的 blue 内。正如 CSS 技巧文章中所说： https://css-tricks.com/almanac/properties/z/z-index/

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

green div 是 blue 的 child 是如何超越 red div 的？

Answer 1

查看您的 CSS 文件。 .green 的 z-index 是 9999。

编辑：当 z-index 为 auto 时，不会创建堆栈上下文。所以红色和蓝色具有相同的堆叠上下文。这就是为什么 blue 的子元素不能像具有较低 z-index.

的嵌套元素那样工作的原因

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Answer 2

！！请注意，下面所有带 * 的引号均来自 this source

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.*

green div 是 blue 的子代，如何能够超越 red div？

你可能 mis-interpret 那句话。它适用于 none 个元素设置了 z-index 的情况。如果您在不设置 z-index 的情况下对元素进行样式设置，它就成立了。请看下面的交互式示例，它没有修改元素的 z-index。

.main {
  border: 1px solid;
  padding-left: 50px;
}

.red, .blue {
  width: 100px;
  height: 100px;
}

.red  {
  background-color: red;
  position: relative;
  top: 50px;
  left: -50px;
}

.blue {
  background-color: blue;
}

.green {
  width: 50px;
  height: 50px;
  position: relative;
  top: -25px;
  background-color: green;
}

<div class="main">
  <div class="red"></div>
  <div class="blue">
    <div class="green"></div>
  </div>
</div>

如您所见，以下说法是正确的

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top)*

但是首先不明显，因为蓝色的位置是static，相反其他两个元素的position是relative（因此non-static） .如果您希望蓝色高于红色（低于绿色），则必须更改其 position CSS 属性。它也在 link 中提到，如下引用

Elements with non-static positioning will always appear on top of elements with default static positioning.*

在下面的示例中，我为蓝色元素（查找“ADDED”）指定了一个 non-static 位置值。这导致了与当所有元素的 position 都是 static 时类似的行为：首先是红色，然后是蓝色在它上面，然后是绿色在它上面，因为它是蓝色的子元素（较低在层次结构中）。

.main {
  border: 1px solid;
  padding-left: 50px;
}

.red, .blue {
  width: 100px;
  height: 100px;
}

.red  {
  background-color: red;
  position: relative;
  top: 50px;
  left: -50px;
}

.blue {
  background-color: blue;
  position: relative; /* !! ADDED !! */
}

.green {
  width: 50px;
  height: 50px;
  position: relative;
  top: -25px;
  background-color: green;
}

<div class="main">
  <div class="red"></div>
  <div class="blue">
    <div class="green"></div>
  </div>
</div>

现在，回到第一句话；

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.*

当您只给元素 B（在这种情况下，它是 .red）一个 z-index 值时，就会发生这种情况。在下面的示例中，我向红色元素添加了一个 z-index 值。

.main {
  border: 1px solid;
  padding-left: 50px;
}

.red, .blue {
  width: 100px;
  height: 100px;
}

.red  {
  background-color: red;
  position: relative;
  top: 50px;
  left: -50px;
  z-index:1; /* !! ADDED !! */
}

.blue {
  background-color: blue;
  position: relative;
}

.green {
  width: 50px;
  height: 50px;
  position: relative;
  top: -25px;
  background-color: green;
}

<div class="main">
  <div class="red"></div>
  <div class="blue">
    <div class="green"></div>
  </div>
</div>

看，绿色元素没有出现了。这是因为红色在蓝色之上。绿色是蓝色的一部分。

在你的问题中，你给了绿色另一个 z-index 值。这将否决当前行为，使其变为红色元素上方，如下所示。

.main {
  border: 1px solid;
  padding-left: 50px;
}

.red, .blue {
  width: 100px;
  height: 100px;
}

.red  {
  background-color: red;
  position: relative;
  top: 50px;
  left: -50px;
  z-index:1;
}

.blue {
  background-color: blue;
  position: relative;
}

.green {
  width: 50px;
  height: 50px;
  position: relative;
  top: -25px;
  background-color: green;
  z-index: 2; /* !! ADDED !! */
}

<div class="main">
  <div class="red"></div>
  <div class="blue">
    <div class="green"></div>
  </div>
</div>

为什么绿色 div 出现在红色 div 之上？

Why does green div come on top of red div?

css

z-index