Визуализатор CSS Stacking Context и z-index
Знакома ситуация: ставите дочернему блоку z-index: 99999, но он всё равно прячется под соседней карточкой? Причина — Stacking Context (контекст наложения). Переключитесь в 3D-вид слоев и поймите механику за секунды.
/* Valideyn yeni Stacking Context yaradır */
.card-a {
position: relative;
z-index: 1;
isolation: isolate; /* və ya opacity: 0.99, transform */
}
/* Bu element digər kontekstləri aşa bilmir */
.child-modal {
position: absolute;
z-index: 9999; /* Valideynin z-index: 1 səviyyəsində ilişib qalır */
}Как пользоваться
- Выберите готовый сценарий («Модалка в ловушке», «Дропдаун под соседней карточкой» или «Чистая изоляция»).
- Включите режим «3D Изометрия слоев» (3D Layers), чтобы увидеть, как браузер физически разносит слои по оси Z.
- Переключайте триггеры родительского блока A (opacity < 1, transform, filter, isolation) и следите за поведением дочернего элемента.
- Читайте блок живой диагностики и скопируйте корректный CSS-код решения проблемы.
Как это работает
Что такое Stacking Context (контекст наложения)?
Контекст наложения — это трехмерная иерархическая плоскость, определяющая, в каком порядке элементы выводятся поверх друг друга по оси Z. Когда элемент создает новый контекст, все его потомки замыкаются внутри него: никакой дочерний z-index не сможет вырваться выше родительского уровня по отношению к внешнему миру.
Что создаёт новый контекст наложения?
Многие думают, что виноват только z-index, но современный CSS создает контекст также при: opacity < 1, transform != none, filter != none, perspective, clip-path, mix-blend-mode, contain: paint и явном свойстве isolation: isolate.
/* Достаточно 0.99 прозрачности или незаметного поворота — и дочерний z-index изолирован! */
.parent {
opacity: 0.99; /* Новый Stacking Context! */
}isolation: isolate — спасение от хаоса с z-index
Свойство isolation: isolate позволяет явно и чисто создать новый контекст наложения без использования сомнительных трюков вроде transform: translateZ(0) или relative + z-index: 0. Внутри изолированного компонента z-индексы живут своей жизнью и не конфликтуют с глобальными слоями.
.card {
isolation: isolate; /* Внутренние бейджи и иконки не вылезают за пределы карточки */
}Частые вопросы
Почему z-index вообще не реагирует на изменение?
По умолчанию position: static игнорирует z-index. Чтобы свойство заработало, блоку необходимо задать position: relative, absolute, fixed или sticky (за исключением direct-child элементов CSS Flexbox и Grid).
Зачем в React используют Portals для модальных окон?
Порталы монтируют модалку или тултип прямо в корень <body>, обходя любые глубоко вложенные Stacking Context, созданные карточками, анимациями или скролл-контейнерами.
Как увидеть контексты наложения в браузере?
В Chrome DevTools откройте вкладку «More tools» → «Layers». Там доступна интерактивная 3D-модель всех композитных слоев открытой страницы.
