z-индекс¶

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

¶История возникновения

Свойство z-index было введено в спецификации CSS уровня 2 (CSS2), опубликованной Консорциумом Всемирной паутины (W3C) в 1998 году. До этого веб-разработчики использовали нестандартные методы управления наложением, такие как порядок следования элементов в HTML-коде или атрибут layer в браузере Netscape Navigator. С появлением CSS2 z-index стал стандартным инструментом для создания многослойных интерфейсов, особенно в контексте позиционирования элементов с помощью absolute и fixed. В последующих версиях CSS (CSS3, CSS4) свойство не претерпело существенных изменений, но его поведение было уточнено в спецификации «CSS Positioned Layout Module Level 3».

¶Принцип работы

¶Контекст наложения (stacking context)

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

Контекст наложения создаётся, если элемент удовлетворяет одному из следующих условий:

Значение position не равно static, а значение z-index не равно auto.
Элемент является корневым элементом документа (<html>).
Значение opacity меньше 1.
Значение transform не равно none.
Значение filter не равно none.
Значение perspective не равно none.
Значение clip-path не равно none.
Значение mask или mask-image не равно none.
Значение mix-blend-mode не равно normal.
Значение isolation равно isolate.
Элемент с position: fixed или position: sticky (по умолчанию создаёт контекст наложения).
Элемент с contain: layout или contain: paint.

¶Значения свойства

z-index принимает три типа значений:

Целое число (например, 1, 10, -1). Положительные значения поднимают элемент выше, отрицательные — опускают ниже. Значение по умолчанию — auto (эквивалентно 0, но без создания контекста наложения).
auto — элемент не создаёт собственного контекста наложения; его порядок наложения определяется контекстом родителя.
inherit, initial, unset — стандартные CSS-ключевые слова для наследования или сброса.

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

В пределах одного контекста наложения элементы располагаются в следующем порядке (от дальнего к ближнему):

Фон и границы элемента, создавшего контекст.
Элементы с отрицательным z-index (в порядке возрастания значения).
Элементы с z-index: auto (в порядке появления в HTML-коде).
Элементы с положительным z-index (в порядке возрастания значения).

¶Примеры использования

¶Простое наложение

``css .box1 { position: absolute; z-index: 1; } .box2 { position: absolute; z-index: 2; } ``

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

¶Отрицательный z-index

``css .box1 { position: absolute; z-index: -1; } .box2 { position: absolute; z-index: 0; } ``

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

¶Вложенные контексты

``html <div class="parent" style="position: relative; z-index: 1;"> <div class="child1" style="position: absolute; z-index: 999;">Внутри</div> </div> <div class="sibling" style="position: relative; z-index: 2;">Снаружи</div> ``

Несмотря на высокий z-index у .child1, он будет отображаться позади .sibling, так как .child1 находится внутри контекста наложения .parent, а .sibling имеет более высокий z-index в корневом контексте.

¶Особенности и ограничения

¶Влияние CSS-свойств

Некоторые CSS-свойства, такие как transform, opacity (значение меньше 1), filter, perspective, clip-path, mask, mix-blend-mode, isolation, а также contain: layout или contain: paint, автоматически создают новый контекст наложения для элемента, даже если z-index не задан. Это может привести к неожиданному поведению, когда элемент с transform: scale(0.9) перестаёт перекрывать другие элементы, как ожидалось.

¶Проблемы с overflow

Если элемент с overflow: hidden и position: relative (но без z-index) содержит дочерние элементы с z-index, они могут быть обрезаны, так как родительский элемент не создаёт контекста наложения. Для решения этой проблемы необходимо явно задать z-index родителю.

¶Максимальное значение

Хотя спецификация CSS не ограничивает значение z-index, браузеры обычно обрабатывают числа в диапазоне от -2^31 до 2^31-1 (примерно -2,1 миллиарда до 2,1 миллиарда). На практике значения выше 1000 используются редко.

¶Применение в веб-разработке

z-index широко применяется для:

Создания модальных окон и всплывающих подсказок (tooltips), которые должны отображаться поверх основного контента.
Реализации выпадающих меню и навигационных панелей.
Наложения слоёв в анимациях и слайдерах.
Управления порядком отображения элементов в сложных интерфейсах, таких как графические редакторы или карты.

¶Критика и альтернативы

Основная критика z-index связана с его сложностью в управлении при большом количестве вложенных контекстов. Разработчики часто сталкиваются с проблемами, когда элемент с высоким z-index не отображается поверх других из-за неявного создания контекста наложения. Для упрощения управления порядком наложения в современных фреймворках (например, React, Vue) используются подходы, такие как:

Использование CSS-свойства isolation: isolate для изоляции контекстов.
Применение CSS-модулей или CSS-in-JS для локального управления стилями.
Использование библиотек, таких как react-overlays или popper.js, которые автоматически управляют z-index для всплывающих элементов.

¶Интересные факты

Свойство z-index получило своё название от оси Z в трёхмерной системе координат, где ось X — горизонтальная, Y — вертикальная, а Z — глубина.
В ранних версиях Internet Explorer (до 7-й) существовали ошибки, связанные с неправильной обработкой z-index для элементов с position: relative.
В CSS Grid и Flexbox z-index работает аналогично, но порядок наложения может зависеть от порядка элементов в разметке, если не задан явный z-index.

¶Источники

Спецификация CSS Positioned Layout Module Level 3 (W3C)
MDN Web Docs: z-index
Статья «The stacking context» на CSS-Tricks
Книга «CSS: The Definitive Guide» (Eric A. Meyer, Estelle Weyl)