Developer

Позиционирование, z-index, stacking context

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

«Почему z-index не работает?» — классика про stacking context.

Объяснение

positionПоведение
staticпо умолчанию, top/left не работают
relativeсмещение от своей позиции, остаётся в потоке, задаёт контекст для потомков
absoluteвне потока, относительно ближайшего позиционированного предка
fixedотносительно viewport
stickyлипнет при прокрутке между relative и fixed (нужен top)
.modal-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 100; }
.badge { position: absolute; top: -4px; right: -4px; }   /* родитель: position: relative */
.header { position: sticky; top: 0; }

z-index работает только у позиционированных элементов (и flex/grid-потомков) внутри своего stacking context — изолированной группы наложения.

Stacking context создаётся: корневым элементом, position с z-index не auto, opacity < 1, transform, filter, will-change, isolation: isolate, position: fixed/sticky, flex/grid-потомками с z-index.

Правило: элемент с z-index: 9999 не выйдет из родительского контекста с меньшим z-index — сравниваются контексты родителей.

.dropdown-wrapper { isolation: isolate; }   /* локальный контекст, чтобы z-index внутри не влиял на страницу */

Нюансы и подводные камни

  • Не сравнивайте z-index из разных контекстов.
  • Модальные окна и подсказки выносят в <body> (Teleport во Vue), чтобы избежать обрезки overflow и контекстов.
  • transform на родителе меняет поведение position: fixed потомка (становится относительным родителя).
  • sticky не работает, если у предка overflow не visible.
  • «Лестница» z-index: 999999 — признак проблемы архитектуры слоёв: введите шкалу токенов.

Практика

  1. Воспроизведите ситуацию с недействующим z-index и исправьте через isolation.
  2. Сделайте липкую шапку таблицы.
  3. Введите переменные слоёв: --z-dropdown, --z-modal, --z-toast.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки