Как перекрыть один элемент другим. CSS-свойство z-index

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

Когда z-index работает

Важно помнить: z-index влияет только на элементы, у которых установлено свойство position со значением relative, absolute, fixed или sticky.

Если элемент по умолчанию статичен (position: static), z-index на него не повлияет.

Пример:

<div style="position: relative; z-index: 1; background: red; width: 100px; height: 100px;">Красный блок</div>
<div style="position: relative; z-index: 2; background: blue; width: 100px; height: 100px; margin-top: -50px;">Синий блок</div>

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

Как работает стек наложения

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

То есть:

.parent {
  position: relative;
  z-index: 10;
}
.child {
  position: relative;
  z-index: 999;
}

Если рядом есть другой .parent с z-index: 20, то никакие z-index внутри первого .parent не смогут «выпрыгнуть» наружу. Это часто становится источником забавных странностей в интерфейсе.

Значения z-index

• auto — элемент следует естественному порядку наложения.
• Число (z-index: 10) — устанавливает приоритет слоя.
• Отрицательные значения (z-index: -1) — элемент уходит за другие.

Важно: z-index можно задавать и отрицательный, чтобы «отправить» элемент куда-то за фон, но нужно следить за доступностью и взаимодействием.

Пример с модалкой

.modal {
  position: fixed;
  z-index: 1000;
  background: white;
}
.overlay {
  position: fixed;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}

Сначала отображается затемнение (overlay), а поверх него — модальное окно (modal).

Советы

• Создавайте плоскую структуру слоёв, не злоупотребляйте z-index: 99999.
• Выделите в проекте диапазоны значений z-index: для модалок, дропдаунов, тултипов и т. д.
• Следите за контекстами наложения: transform, filter, opacity < 1, will-change, position: fixed тоже могут его создавать.

Отладка

Чтобы разобраться, кто кого перекрывает, используйте DevTools в браузере — вкладка Computed → z-index, а также визуальное включение outline или временной заливки фоном.

Заключение

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

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.