CSS z-index та контекст накладення

Що таке z-index?

z-index контролює порядок накладання позиціонованих елементів вздовж z-осі (глибини). Вищі значення з'являються попереду нижчих значень.

Основне використання

css

.behind {
  position: relative;
  z-index: 1;
}

.in-front {
  position: relative;
  z-index: 2; /* З'являється над .behind */
}

Ключове правило: z-index працює лише з елементами, у яких значення position не є static (тобто, relative, absolute, fixed або sticky), або з дочірніми елементами flex/grid.

Контекст накладання — це тривимірний концептуальний контейнер, який визначає, як дочірні елементи накладаються один на одного. Дочірні елементи є ізольованими — їх z-index змагається лише з сусідніми елементами в тому ж контексті накладання.

Що створює контекст накладання?

Властивість/Умова	Приклад
Кореневий елемент	`<html>`
`position` + `z-index` (не auto)	`position: relative; z-index: 1;`
`opacity` < 1	`opacity: 0.99;`
`transform` (будь-яке значення)	`transform: translateX(0);`
`filter` (будь-яке значення)	`filter: blur(0);`
`will-change`	`will-change: transform;`
`isolation: isolate`	Явно створює контекст
`position: fixed` або `sticky`	Завжди створює контекст
Дочірній елемент Flex/Grid з z-index	`z-index: 1;` на дочірньому елементі flex

Класична проблема z-index

html

<div class="parent-a" style="position: relative; z-index: 1;">
  <div class="child" style="position: relative; z-index: 9999;">
    У мене z-index: 9999, але я в пастці!
  </div>
</div>

<div class="parent-b" style="position: relative; z-index: 2;">
  Я з'являюся ВИЩЕ дочірнього елемента, незважаючи на z-index: 2
</div>

Дочірній елемент з z-index: 9999 ніколи не може з'явитися вище parent-b, оскільки його батько (parent-a) має нижчий z-index. Накладання дочірнього елемента є ізольованим в межах parent-a.

isolation: isolate

isolation: isolate створює новий контекст накладання без побічних ефектів:

css

.modal-container {
  isolation: isolate; /* Новий контекст накладання, чистий */
}

.modal {
  position: fixed;
  z-index: 100;
}

Найкращі практики

Використовуйте шкалу z-index

css

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
}

.modal    { z-index: var(--z-modal); }
.tooltip  { z-index: var(--z-tooltip); }
.dropdown { z-index: var(--z-dropdown); }

Уникайте воєн z-index

css

/* ❌ Погано */
.header { z-index: 99999; }

/* ✅ Добре — використовуйте організовану шкалу */
.header { z-index: var(--z-sticky); }

Налагодження z-index

Відкрийте DevTools у браузері
Перевірте елемент і перевірте його z-index
Пройдіться вгору по DOM, щоб знайти батьківські контексти накладання
Перевірте, чи має який-небудь предок opacity, transform, filter або will-change — ці властивості тихо створюють контексти накладання

Важливо:

Більшість проблем з z-index виникає через недостатнє розуміння контекстів накладання. Пам'ятайте: дитина ніколи не може втекти з контексту накладання свого батька. Використовуйте isolation: isolate, щоб створити контрольовані контексти накладання та організувати значення z-index за допомогою CSS змінних.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань