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

我写了下面的源代码。
在这个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的介绍文章，但我无法理解这个问题。

最佳答案

正如您所注意到的，.box1和.box2参与相同的堆栈上下文（根堆栈上下文），z索引为auto。这将导致它们按源顺序绘制，堆栈级别为0。
但是，由于它们的z索引是自动的，因此它们不会分别为.box3和.box4建立自己的堆栈上下文。这意味着所有四个元素都参与相同的根堆栈上下文，堆栈级别为0。因此，.box2将始终被绘制在.box1及其后代（在本例中为.box3）上，这仅仅是因为.box2按源顺序在.box1之后。这是真的，即使.box3和.box4是固定位置的，因此建立了它们自己的堆叠上下文。参见section 9.9 of CSS2.1（强调我的）：
在每个堆叠上下文中，按从后到前的顺序绘制以下层：
构成堆叠上下文的元素的背景和边界。
具有负堆栈级别的子堆栈上下文（首先是最负的）。
流入、非内联级别、非定位的子体。
非定位浮标。
流内、内联级别、非定位的子体，包括内联表和内联块。
堆栈级别为0的子堆栈上下文和堆栈级别为0的定位子体。
具有正堆栈级别的子堆栈上下文（先为最小正）。
将z-index的.box3设置为1可确保它被绘制在所有其他框之上，其堆栈级别保持为0。