Z-index и контекст наложения: работа с глубиной слоёв

Что такое z-index и зачем он нужен? 🎨

Когда элементы на странице перекрывают друг друга, браузеру нужны правила, чтобы определить, кто будет «сверху». Здесь на сцену выходит z-index — свойство, управляющее порядком наложения элементов по оси Z (глубине).

.box {
  z-index: 10; /* Чем больше значение, тем "ближе" элемент к пользователю */
}

💡 z-index работает только с позиционированными элементами (position: relative, absolute, fixed, sticky). Без этого — как машина без колёс!

Как работает z-index? 🧐

Значения z-index могут быть: - Отрицательными (-1): элемент уходит «под» другие. - Авто (auto): стандартное поведение (обычно равно 0). - Положительными (1, 100, 9999): элемент поднимается «выше».

.parent {
  position: relative;
  z-index: 5;
}

.child {
  position: absolute;
  z-index: 10; /* Ребёнок выше родителя! */
}

⚠️ Важно: z-index сравнивается только внутри одного контекста наложения. Об этом дальше.

Контекст наложения: магия и ограничения ✨

Контекст наложения (stacking context) — это «изолированная зона», где z-index сравнивается только между «местными» элементами. Как создать такой контекст?

Позиционирование + z-index ≠ auto.
Непрозрачность (opacity < 1).
Трансформации (transform, filter, perspective).
CSS-свойства типа isolation: isolate.

Пример:

.modal {
  position: fixed;
  z-index: 1000; /* Контекст создан! */
}

/* Внутри модалки свои правила: */
.modal__close-btn {
  z-index: 10; /* Работает только внутри .modal */
}

Типичные проблемы и решения 🔧

1. «Z-index не работает!»

Проверь position. Без него — никак.
Убедись, что элемент в нужном контексте. Если родитель имеет z-index: 5, а ты пытаешься «перепрыгнуть» его соседа с z-index: 10, ничего не выйдет.

2. «Модальное окно не поверх всего»

Решение:

body.modal-open {
  overflow: hidden; /* Запрещаем скролл */
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* Почти гарантированно сверху */
}

3. «Элементы налезают друг на друга»

Используй отладочный стиль:

.debug * {
  outline: 1px solid red;
  z-index: 99999 !important; /* Подсветка слоёв */
}

Практика: создаём многослойный интерфейс 🏗️

Допустим, у нас есть:

Фон (z-index: 1).
Карточка (z-index: 2).
Выпадающее меню (z-index: 3).
Модальное окно (z-index: 10).

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

.card {
  position: relative;
  z-index: 2;
}

.dropdown {
  position: absolute;
  z-index: 3; /* Выше карточки, но ниже модалки */
}

.modal {
  position: fixed;
  z-index: 10; /* На самом верху! */
}

📌 Совет: Документируй значения z-index в проекте. Например: css /* z-index scale: 1-10 (base), 100-200 (modals), 1000+ (overlays) */

Итоги: главные правила z-index 🏆

Работает только с position (кроме static).
Сравнивается внутри контекста наложения.
Контекст создаётся не только через z-index (см. opacity, transform).
Отрицательные значения уводят элементы «под» остальные.
Документируй свою шкалу z-index, чтобы не запутаться.

Теперь ты знаешь, как управлять глубиной слоёв, как настоящий CSS-волшебник! 🧙‍♂️