Почему последующие элементы перекрываются при использовании того же номера z-index?

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-индексом auto.Это приводит к тому, что они отображаются в исходном порядке с уровнем стека 0.

Однако, поскольку их z-index автоматический, они не устанавливают свои собственные контексты стека для .box3 и .box4 соответственно.Это означает, что все четыре элемента участвуют в одном и том же корневом контексте стека с уровнем стека 0. В результате, .box2 всегда будет закрашиваться поверх .box1 и его потомки (в данном случае .box3) просто потому, что .box2 идет после .box1 в порядке следования исходного кода.Это верно, даже если .box3 и .box4 имеют фиксированное положение и, следовательно, устанавливают свои собственные контексты стеков.См. раздел 9.9 CSS2.1 (выделение):

В каждом контексте стекования следующие слои закрашиваются в обратном порядке:

1. фон и границы элемента, формирующего контекст стека.
2. дочерний контекст стека с отрицательными уровнями стека (сначала наиболее отрицательный).
3. входящий поток, не встроенныйодноуровневые непозиционированные потомки.
4. непозиционированные поплавки.
5. встроенные непозиционированные потомки на уровне строк, включая встроенные таблицы и встроенные блоки.
6. дочерние контексты стека с уровнем стека 0 и позиционированные потомки с уровнем стека 0.
7. дочерние контексты стека с положительными уровнями стека (сначала наименее положительный).

Установка z-index для .box3 на 1 гарантирует, что он будет отображаться над всеми остальными полями, уровень стека которых остается равным 0.