1

我正在审查堆栈上下文概念，对以下示例感到困惑 在父 div 中，我们创建了一个新的堆栈上下文，我不明白为什么父 div 上方的子堆栈，我也使用此图像作为参考堆叠顺序。

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  position: relative;
  /* Generate new stacking context */
  z-index: 1;
}

.child {
  width: 100px;
  height: 200px;
  background: #32d19c;
  z-index: -1;
}
<div class="box">
  <div class="parent">
    parent
    <div class="child">child</div>
  </div>
</div>

4

1 回答 1

2

由于您已经为 创建了新的堆叠上下文，因此对其子项的.parent设置只会更改它们相对于同一块的其他子项的堆叠顺序。z-index一个元素不能在它自己的堆叠上下文后面分层。要将子级放在其父级之后，让其z-index工作相对于文档（或其他位于 DOM 更上层的共同祖先）。

堆叠上下文由...由任何...
元素形成，其位置值是绝对或相对，z-index 值不是 auto。
—堆叠上下文

.box {
  position: relative;
  /* Generate new stacking context here */
}

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  margin: 0 0 0 40px;
  /* position: relative; */
  /* Do not generate new stacking context here */
}

.child {
  position: relative;
  width: 100px;
  height: 200px;
  background: #32d19c;
  margin: 0 0 0 -40px;
  z-index: -1;
}
<div class="box">
  <div class="parent">
    parent
    <div class="child">child</div>
  </div>
</div>

在您链接的示例.box中，该元素设置为display:flex. 当元素“是 flex 容器的子元素，z-index 值不是 auto”（堆叠上下文）时，也会创建堆叠上下文。我们可以从中删除z-index值.parent以避免给它一个新的堆叠上下文。

.box {
  display: flex;
}

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  margin: 0 0 0 40px;
  /* z-index: 1; */
  /* Do not generate a new stacking context here */
}

.child {
  width: 100px;
  height: 200px;
  background: #32d19c;
  margin: 0 0 0 -40px;
  position: relative;
  z-index: -1;
}
<div class="box">
  <div class="parent">
    parent
    <div class="child">child</div>
  </div>
</div>

于 2022-01-17T04:06:48.150 回答