QuickFrontend
CSS

Как работает z-index и что такое stacking context?

z-index и stacking context

Основы

z-index управляет порядком наложения по оси Z. Работает только на позиционированных элементах (position ≠ static) или flex/grid-элементах.

Stacking context

Элемент создаёт новый stacking context при наличии:

  • position ≠ static + z-index ≠ auto
  • opacity < 1
  • transform, filter, perspective
  • isolation: isolate

Внутри stacking context z-index работает только между дочерними элементами - не выходит наружу.

<div style="position:relative; z-index:1">  <!-- контекст A -->
  <div style="position:relative; z-index:9999">
    <!-- 9999 работает только внутри A -->
  </div>
</div>
<div style="position:relative; z-index:2">  <!-- контекст B, выше A -->
</div>

Элемент с z-index:9999 будет под вторым div-ом, потому что его контекст (z-index:1) ниже.

Источники