Расскажи про контекст наложения (stacking context) в CSS и почему элемент с большим z-index может оказаться ниже элемента с меньшим z-index?

Что такое stacking context?

Stacking context — это воображаемая трёхмерная область в CSS, в которой элементы группируются и упорядочиваются по вертикальной оси (ось Z). Каждый контекст наложения имеет свой собственный порядок отрисовки, и элементы внутри него не могут пересекаться с элементами из других контекстов, если только сами контексты не пересекаются.

Контекст наложения создаётся, когда элемент имеет определённые свойства, например: position: relative/absolute с z-index (не auto), opacity меньше 1, transform, filter, will-change и другие. Когда такой элемент создаёт контекст, все его дочерние элементы участвуют в наложении только внутри этого контекста.

Почему z-index может не работать?

Представьте два элемента: A и B. У A есть дочерний элемент A1 с z-index: 100, а у B — дочерний B1 с z-index: 1. Если A сам имеет z-index: 0 и создаёт контекст, а B имеет z-index: 10, то B1 будет выше A1, несмотря на то, что у A1 z-index больше. Это происходит потому, что сначала сравниваются z-index родительских контекстов (A и B), а уже внутри каждого контекста — их дочерние элементы.

/* Пример */
.parent-a { position: relative; z-index: 0; } /* создаёт контекст */
.parent-b { position: relative; z-index: 10; } /* создаёт контекст */
.child-a { position: absolute; z-index: 100; } /* внутри parent-a */
.child-b { position: absolute; z-index: 1; } /* внутри parent-b */
/* child-b будет выше child-a, потому что parent-b выше parent-a */

Как это применяется на практике?

Понимание stacking context критично при работе с модальными окнами, выпадающими меню, тултипами и другими перекрывающимися элементами. Часто разработчики сталкиваются с проблемой, когда элемент с большим z-index не отображается поверх ожидаемого, и причина — в создании неявного контекста родителем.

Чтобы избежать ошибок, стоит проверять, какие свойства создают контекст наложения у родительских элементов, и при необходимости выносить элементы на верхний уровень DOM или использовать isolation: isolate для явного создания контекста.

Итог

Stacking context — это мощный механизм управления порядком наложения, но он требует внимательности. Всегда помните, что z-index работает только внутри одного контекста, и если элемент не отображается так, как ожидалось, проверьте, не создаёт ли его родитель отдельный контекст наложения.