z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static.
Синтаксис
.my-element {
z-index: 2;
}
Значения свойства
- Положительные и отрицательные целые числа. Чем больше число, тем выше элемент будет находиться в порядке наложения. Отрицательные значения помещают элементы позади других элементов.
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 не будет влиять на элементы вне этого контекста.