PrepBro
← Назад к вопросам

Что такое Z-индекс?

2.2 Middle🔥 151 комментариев
#JavaScript Core

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое z-index?

Z-index — это CSS-свойство, которое определяет порядок наложения (stacking order) позиционированных элементов (т.е. элементов с position: absolute, relative, fixed, sticky) вдоль воображаемой оси Z, направленной "на зрителя" в трёхмерном пространстве веб-страницы. Чем выше значение z-index, тем "ближе" к пользователю будет расположен элемент, перекрывая элементы с меньшим значением или без него.

Основные принципы работы

  1. Работает только с позиционированными элементами (кроме position: static, которая является значением по умолчанию). Если попытаться применить z-index к не-позиционированному блоку, он не даст эффекта.
  2. Значения: целые числа (положительные, отрицательные, ноль). Можно использовать auto (значение по умолчанию, эквивалентно 0 в большинстве контекстов наложения).
  3. Создаёт новый контекст наложения (stacking context). Это ключевое понятие, которое часто вызывает путаницу.

Контекст наложения (Stacking Context)

Контекст наложения — это изолированная группа элементов, которые накладываются друг на друга в определённом порядке относительно родительского контекста. Новый контекст создаётся, когда элементу задаётся:

  • position: absolute/relative/fixed/sticky И z-index не auto.
  • opacity меньше 1.
  • transform, filter, perspective, clip-path и некоторые другие свойства.
  • Элементы flex/grid с z-index не auto.

Важно: элементы внутри одного контекста наложения сравниваются между собой по z-index, но никогда не могут быть помещены между элементами из другого, родительского контекста. Они накладываются как единый "слой".

Пример создания контекста:

.parent {
  position: relative;
  z-index: 1; /* Создаёт новый контекст наложения */
}

.child {
  position: absolute;
  z-index: 9999; /* Работает только внутри контекста .parent */
}

Здесь .child с огромным z-index: 9999 никогда не перекроет другой элемент вне .parent, если у того z-index: 2, потому что весь контекст .parent имеет "вес" всего 1.

Порядок наложения по умолчанию (без z-index)

Если z-index не задан, элементы накладываются в следующем порядке (снизу вверх):

  1. Фон и границы корневого элемента (<html>).
  2. Непозиционированные блоки (position: static) в порядке появления в HTML (принцип "последний в коде — выше").
  3. Позиционированные элементы (position: absolute/relative/fixed) в порядке появления в HTML.

Практическое применение и пример

z-index часто используется для:

  • Модальных окон, выпадающих меню, тултипов (должны быть поверх всего).
  • Наложения декоративных элементов (оверлеев, теней).
  • Создания parallax-эффектов с отрицательными значениями.
<div class="box box1">Box 1 (z-index: 5)</div>
<div class="box box2">Box 2 (z-index: 10)</div>
<div class="box box3">Box 3 (z-index: auto)</div>

.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  z-index: 5;
  background: rgba(255,0,0,0.7);
}
.box2 {
  top: 50px;
  left: 50px;
  z-index: 10; /* Будет поверх box1 */
  background: rgba(0,255,0,0.7);
}
.box3 {
  top: 100px;
  left: 100px;
  /* z-index: auto (по умолчанию) */
  background: rgba(0,0,255,0.7);
}

В этом примере .box2 перекроет .box1, а .box3 с auto будет ниже обоих, так как позиционированные элементы без явного z-index рассматриваются как z-index: 0.

Распространённые проблемы и решения

  1. "z-index не работает": скорее всего, элемент не позиционирован, или вы пытаетесь "перепрыгнуть" через границу контекста наложения. Нужно либо задать position, либо пересмотреть иерархию контекстов.
  2. Большие значения (9999): часто избыточны и создают нечитаемый код. Достаточно небольших осмысленных значений в рамках проекта.
  3. Динамическое управление: через JavaScript можно изменять z-index интерактивно, например, для каруселей или drag-and-drop.

Резюме

Z-index — мощный, но требующий понимания механизм управления глубиной в CSS. Ключ к его корректному использованию — чёткое представление о контекстах наложения, которые изолируют группы элементов. Всегда старайтесь минимизировать вложенность контекстов и использовать минимально необходимые значения для поддержания читаемости кода и предсказуемости поведения вёрстки.

Что такое Z-индекс? | PrepBro