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

На самом деле элементы внутри HTML-документа генерируются в трех измерениях. Кроме привязки к осям X и Y их также можно размещать по оси Z. Для этого для элемента должно быть установлено CSS position relative или другие значения данного свойства:

CSS position relative

Такие свойства, как margin, float и offset отвечают за то, где элемент будет располагаться на осях х и y, в то время как за расположение на оси z отвечает свойство z-index.

Свойство z-index

Это свойство позволяет определить:

  • Расположение текущего элемента в стеке;
  • Определяет ли текущий элемент новый контекст наложения (stacking level).

Это свойство применимо исключительно к элементам с установленным позиционированием. То есть, свойство position элемента должно быть установлено как relative, absolute или fixed. У свойства z-index имеется три значения:

Значение Описание
auto Устанавливает уровень стека на 0, и не создает новый стек.
<integer> Устанавливает уровень стека на целое число, и создает новый стек.
inherit Устанавливает позиционирование относительно родительского элемента и создает новый стек.

Пример кода

z-index: auto | <integer> | inherit

Уровень стека (очередность отображения элементов)

Это значение определяет, где именно на оси Z находится элемент. Чем больше число, тем выше элемент будет в стеке и к «поверхности» экрана:

элемент в стеке

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

Вычисляем позицию в стеке

Кроме свойства z-index на position relative CSS элемента в стеке также влияет несколько факторов. Элементы располагаются в стеке в следующем порядке:

Позиция Описание CSS-код
1 (bottom) Элемент формирует контекст наложения. z-index: <integer>
2 Дочерние элементы с отрицательным уровнем стека. z-index: <negative integer>

position: relative | absolute | fixed

3 Дочерние элементы со стилизацией In-flow, non-inline или без установленного позиционирования. display: /* not inline */

position: static

4 Плавающие дочерние элементы без установленного позиционирования. float: left | right

position: static

5 Дочерние элементы со стилизацией In-flow inline или без выставленного позиционирования. display: /* inline */

position: static

6 Дочерние элементы с 0 уровнем стека. z-index: auto | 0

position: relative | absolute | fixed

7 (top) Дочерние элементы с положительным уровнем стека. z-index: <positive integer>

position: relative | absolute | fixed

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

При указании CSS position relative z index мы не всегда определяем ее относительно всех остальных элементов на странице. Уровень элемента в стеке отражает лишь его позицию в рамках отдельного контекста наложения.

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

Контекст наложения можно объяснить следующими правилами:

1. Исходный контекст наложения заключен в корневом элементе

Исходный контекст наложения в любом HTML-документе заключен в корневом элементе <html>. До тех пор, пока не создано новых контекстов, уровень элемента в стеке будет по умолчанию относиться ко всем элементам на странице.

2. Создание новых контекстов с указанным свойством z-index

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

Впоследствии новый контекст будет применяться ко всем дочерним элементам данного элемента. Их уровень теперь указывается только в рамках данного контекста, и не относится к корневому элементу.

В приведенном ниже примере .foo относится к контексту наложения 1, а .bar – к контексту наложения 2:

3

3. Элементы нельзя располагать выше или ниже уровня родительского

Если у родительского элемента имеется установленный CSS position relative z index, то все дочерние элементы не могут располагаться над или под этим уровнем (в рамках контекста наложения родительского элемента). В приведенном ниже примере, несмотря на то, что у .bar значение z-index выше, чем у .baz, этот элемент все равно расположен “под” ним. Так происходит потому, что в контексте 1 .bar не может располагаться выше или ниже уровня 1.

CSS
.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }

4

Перевод статьи “How z-index Works” был подготовлен дружной командой проекта Сайтостроение от А до Я.