Question

在上面的codepen中，我有两个div red和blue。使用z-index，即使在标记中blue之前，我们也确保红色高于蓝色。

green是blue的子项，其中z-index是9999。即使z-index很高，也应将其捕获在blue下方的red内部。如CSS技巧文章所述： https://css-tricks.com/almanac/properties/z/z-index/

还请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不能高于元素B。

作为green的子级的blue div如何才能排在red div的顶部？

Answer 1

查看您的CSS文件。 z-index的{{1}}是.green。

编辑：当9999为z-index时，不创建任何堆栈上下文。因此，红色和蓝色具有相同的堆叠上下文。这就是为什么蓝色的子项无法像auto较低的嵌套元素那样工作的原因。

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

Answer 2

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

还请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不能高于元素B。*


作为green的子级的blue div如何才能排在red div的顶部？

您可能会误解该句子。这是针对没有设置任何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>

如您所见，以下语句是正确的

在没有任何z-index值的情况下，元素按照它们在DOM中出现的顺序堆叠（在同一层次结构级别中最低的元素出现在顶部）*

但是，首先并不明显，因为blue的位置是static，与其他两个元素相反，它们的position是relative（因此是非静态的）。如果您期望蓝色在红色之上（在绿色之下），则必须更改其position CSS属性。链接中也提到了此内容，如下所述

具有静态位置的元素将始终显示在具有默认静态位置的元素顶部。*

在下面的示例中，我为蓝色元素（查找“ ADDED”）指定了一个非静态位置值。这导致与所有元素的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>

现在，回到第一引号；

还请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不能高于元素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之上？

2 个答案: