Stacking Order и z-index: порядок наложения элементов в CSS

Stacking Order — это порядок, в котором элементы накладываются друг на друга по оси Z (то есть по глубине). Это определяет, какой элемент окажется «сверху», если они перекрываются.

Как работает порядок наложения?

Базовые правила

1. Элементы по умолчанию накладываются в порядке их появления в DOM.
2. Элементы с position (relative, absolute, fixed, sticky) и z-index могут перекрывать друг друга.
3. Создание контекста наложения (stacking context) влияет на приоритет отображения.

Алгоритм наложения (Stacking Order)

1. Контекст корневого элемента (html)
2. Фон и границы блока с z-index: auto
3. Блочные элементы без позиционирования (position: static)
4. Позиционированные элементы (relative, absolute, fixed, sticky) с z-index: auto
5. Позиционированные элементы с z-index > 0
6. Созданные stacking context'ы (внутри transform, opacity < 1, filter, will-change, и т.д.)

Что такое Stacking Context?

Stacking Context — это изолированная область наложения, внутри которой порядок слоёв работает независимо от родительских.

Как создается stacking context

Пример с z-index

<div class="box a">A</div>
<div class="box b">B</div>

Элемент .b окажется поверх .a, потому что z-index: 2 > 1.

Частые ошибки

• z-index работает только на позиционированных элементах (position: relative, absolute, fixed, sticky)
• z-index не работает, если элемент не создаёт stacking context
• Элемент с z-index: 999 может оказаться под элементом с z-index: 1, если находятся в разных контекстах наложения

Как проверить порядок наложения?

• Используйте вкладку "Elements" → "Computed" → z-index в DevTools.
• Используйте DevTools → Layers (в Chrome) для анализа stacking context.
• Добавьте временно outline/border/background для наглядности.