Проблема контекста стекирования CSS: вложенный элемент перекрывает родственный элемент родителя ⇐ CSS

[Anonymous]

Я изучал стекирование контекста, а затем захотел попробовать и проверить то, что только что узнал.
Как я понял, z-index работает только с этими элементами которые находятся внутри контекста стекирования и никогда не могут выйти за его пределы. Вот почему я создал 3 блока, каждый со своим собственным контекстом стекирования, и поместил блок 4 внутрь блока 1. Я изменил его z-индекс, чтобы доказать свою точку зрения, что он не будет перекрывать box2 и box3, поскольку z-index работает только внутри box1. Таким образом, даже если z-индекс box4 равен 999999, он все равно не должен перекрывать box2 и box3, поскольку они находятся за пределами контекста стекирования.
Но угадайте, что: box4 преодолел box2 и box3 с z-индексом всего 1.
Я действительно шокирован этим и хотел спросить, было ли у меня ложное понимание контекста стекирования, или то, что я узнал, устарело и больше не тот регистр.

Код: Выделить всё

h1 {
text-decoration: underline;
}

.absolute {
position: absolute; /*Created a stacking-context*/
vertical-align: bottom;
text-align: end;
}

.box4 {
z-index: 1; /* This should effect the stacking order of  box4 only within box1*/
}

Код: Выделить всё

Document




box4
box1



style="width: 400px; height: 400px; background-color: goldenrod"
class="absolute box2"
>
box2



style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)"
class="absolute box3"
>
box3

Подробнее здесь: https://stackoverflow.com/questions/793 ... ng-element