Энциклопедия CSS: z-index

Энциклопедия CSS: z-index

Тематические порталы

Портал CSS • Портал Веб-разработчиков

CSS-свойство z-index отвечает за управление слоями элементов на веб-странице. Оно определяет порядок наложения элементов друг на друга, позволяя контролировать их видимость в трёхмерном пространстве браузера.

В этой статье мы подробно разберём, как работает z-index, как правильно его использовать и какие ошибки могут возникнуть при его применении.

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

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

Основные правила работы z-index:

1. По умолчанию все элементы находятся на одном уровне (z-index: 0).
2. Элементы с большим z-index перекрывают элементы с меньшим значением.
3. z-index работает только для элементов с position отличным от static.
4. Элементы внутри родительского контейнера учитывают z-index родителя.

Значения z-index

z-index может принимать различные значения:

• Автоматическое значение (auto) – элемент наследует порядок слоёв от родительского контейнера.
• Числовые значения – положительные и отрицательные числа (например, z-index: 10 или z-index: -1).
• Наследуемые значения – если родитель имеет z-index, дочерние элементы могут быть ограничены его областью.

Пример базового использования z-index:

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 100px;
  height: 100px;
  background: blue;
  z-index: 2;
}

В данном примере .box2 окажется выше .box1, так как его z-index больше.

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

Важное понятие, связанное с z-index, – контекст наложения. Это область, внутри которой дочерние элементы упорядочиваются независимо от внешних элементов.

Контекст наложения создаётся, если:

• Элемент имеет z-index, отличный от auto, и position не static.
• Элемент имеет opacity менее 1.
• Используется filter, transform, perspective, clip-path и другие свойства.
• display: flex или grid с установленным z-index.

Пример создания нового контекста наложения:

.parent {
  position: relative;
  z-index: 10; /* создаёт новый контекст наложения */
}
.child {
  position: absolute;
  z-index: 5; /* z-index будет отсчитываться относительно .parent, а не всей страницы */
}

Здесь .child не сможет перекрыть элементы, находящиеся вне .parent, даже если у него большее значение z-index.

Ошибки и распространённые проблемы

1. z-index не работает

Если z-index не влияет на порядок слоёв, проверьте:

• У элемента position установлен в relative, absolute, fixed или sticky.
• У родительского контейнера нет контекста наложения.
• У других элементов нет z-index, создающего новый контекст наложения.

2. Элемент не перекрывает другие элементы

• Проверьте, не ограничен ли он родительским overflow: hidden.
• Убедитесь, что z-index применяется правильно в рамках контекста наложения.

3. z-index внутри flexbox

• Flex-контейнер с display: flex может создавать контекст наложения. Используйте position: relative и z-index для корректного управления слоями.

Заключение

z-index – мощное CSS-свойство, которое позволяет управлять слоями на веб-странице. Однако для его правильного использования важно понимать концепцию контекста наложения и особенности его работы. Следуя описанным принципам, вы сможете эффективно применять z-index для создания сложных интерфейсов и улучшения пользовательского опыта.