Question

我编写了以下源代码。

在此HTML和CSS中，当悬停在.box2上时，.box3显示在.box3上方。

但这与我的期望不同。

此代码期望box1和box2会生成相同的堆栈级堆栈上下文，并且box3和position: fixed将显示在其他元素上方。

div {
  width: 250px;
  height: 250px;
}

.box1 {
  background: #ffa;
  position: relative;
}

.box2 {
  background: #faf;
  position: relative;
}

.box3,
.box4 {
  opacity: 0;
  background: green;
}

.box1:hover .box3,
.box2:hover .box4 {
  opacity: 1;
}

.box4:hover,
.box3:hover {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #aff;
}

<div class="box1">
  <div class="box3"></div>
</div>
<div class="box2">
  <div class="box4"></div>
</div>

要实现我期望的行为，我必须在z-index: 1;中设置box 3。使其成为我的预期行为。

div {
  width: 250px;
  height: 250px;
}

.box1 {
  background: #ffa;
  position: relative;
}

.box2 {
  background: #faf;
  position: relative;
}

.box3,
.box4 {
  opacity: 0;
  background: green;
}

.box3 {
  z-index: 1;
}

.box1:hover .box3,
.box2:hover .box4 {
  opacity: 1;
}

.box4:hover,
.box3:hover {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #aff;
}

<div class="box1">
  <div class="box3"></div>
</div>
<div class="box2">
  <div class="box4"></div>
</div>

什么样的力作用在每个元件上？

我阅读了我搜索并点击的W3C文章和z-index的介绍文章，但我无法理解这个问题。

Answer 1

您注意到，.box1和.box2参与相同的堆叠上下文（根堆叠上下文），并且z-index为auto。这导致它们以源顺序绘制，堆栈级别为0。

但是，由于它们的z索引是自动的，因此它们不会分别为.box3和.box4建立自己的堆栈上下文。这意味着所有四个元素都参与相同的根堆栈上下文，堆栈级别为0。结果，.box2将始终被绘制在.box1 及其后代（在本例中为.box3），仅是因为.box2在源顺序中紧随.box1之后。即使.box3和.box4处于固定位置并因此建立了自己的堆栈上下文，这也是正确的。参见section 9.9 of CSS2.1（强调我的观点）：

在每个堆叠上下文中，以从后到前的顺序绘制以下图层：


形成堆叠上下文的元素的背景和边界。

堆栈级别为负的子堆栈上下文（首先为负）。

流入，非内联级别，未定位的后代。

未定位的浮标。

流内，行内，非定位后代，包括内联表和内联块。

堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代。

堆栈级别为正的子堆栈上下文（优先级最低）。

将.box3的z-index设置为1可以确保将其绘制在所有其他堆栈（堆栈级别保持为0）上方。

为什么使用相同数字的z-index后继元素会重叠？

1 个答案: