Что такое «z-index apocalypse» и как его избежать?

z-index apocalypse — это неофициальный термин, описывающий ситуацию, когда в проекте появляются десятки элементов с огромными значениями z-index (999, 9999, 99999), которые конфликтуют между собой. Разработчики пытаются «перекрыть» проблемный элемент, просто увеличивая число, но это лишь усугубляет хаос.

Почему это происходит

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

Если родитель создал контекст, дочерний элемент с z-index: 9999 не сможет перекрыть элемент из другого контекста с z-index: 1. Отсюда — бесконечная гонка чисел.

Пример проблемы

<div class="modal" style="position: fixed; z-index: 1000;">
  <div class="tooltip" style="position: absolute; z-index: 9999;">...</div>
</div>
<div class="header" style="position: sticky; z-index: 2000;">...</div>

Tooltip с z-index 9999 всё равно окажется под header, если modal создаёт свой контекст с меньшим z-index, чем header.

Как избежать

• Использовать единую шкалу z-index (например, 10, 20, 30) и документировать её.
• Минимизировать создание новых stacking context без необходимости.
• Применять isolation: isolate для локального изолирования слоёв.
• Использовать порталы (React Portal) для модалок и тултипов, чтобы они рендерились в корне DOM.
• Проверять через DevTools, какой контекст создаёт родитель.

Практический подход

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}
.modal { z-index: var(--z-modal); }
.tooltip { z-index: var(--z-tooltip); }

Итог: z-index apocalypse лечится не увеличением чисел, а управлением контекстами наложения и единой шкалой слоёв. Это делает поведение интерфейса предсказуемым и упрощает поддержку.