Why do the subsequent elements overlap when using the same number z-index?

Question

I wrote the following source code.

In this HTML and CSS, .box2 is displayed above.box3 when hovering to .box3.

But this was different from my expectation.

This code expect that box1 andbox2 will generate the same stack level stack context and box3 withposition: fixed will be displayed above the other elements It was.

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>

To realize the behavior I expected, I have to set z-index: 1; in box 3. To make it my predicted behavior.

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>

What kind of force is acting on each element, is it occurring?

I read the W3C article that I searched for and hit, and the introduction article of z-index, but I could not understand this problem.

Answer 1

As you note, .box1 and .box2 are participating in the same stacking context (the root stacking context), with a z-index of auto. This causes them to be painted in source order with a stack level of 0.

However, because their z-index is auto, they do not establish their own stacking contexts for .box3 and .box4 respectively. This means that all four elements are participating in the same, root stacking context with a stack level of 0. As a result, .box2 will always be painted over .box1 and its descendants (in this case, .box3) simply because .box2 comes after .box1 in source order. This is true even though .box3 and .box4 are fixed positioned and therefore do establish their own stacking contexts. See section 9.9 of CSS2.1 (emphasis mine):

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

Setting the z-index of .box3 to 1 ensures that it's painted above all the other boxes, whose stack level remains 0.