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

Синтаксис

.my-element {
  z-index: 2;
}

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

  • Положительные и отрицательные целые числа. Чем больше число, тем выше элемент будет находиться в порядке наложения. Отрицательные значения помещают элементы позади других элементов.
  • auto: значение по умолчанию. Порядок наложения элементов определяется на основе порядка элементов в документе и их позиционирования относительно других элементов.

Как использовать z-index

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

⭐ Поддержка браузерами свойства z-index

Наследование

Свойство z-index не наследуется от родительских элементов.

Нюансы использования

Значение z-index применяется только к элементам, у которых задано позиционирование, например, position: absolute, position: relative или position: fixed. Для элементов с position: static (значение по умолчанию) свойство не будет иметь эффекта.

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

Свойство z-index применяется только к элементам, находящимся в контексте одного блочного форматирования. Если элемент находится внутри другого элемента с определённым контекстом форматирования, его z-index не будет влиять на элементы вне этого контекста.