CSS-свойство z-index задает порядок наложения или расположения для позиционированных элементов, то есть элементов, значение position которых является absolute, fixed, или relative. Эти элементы накладываться друг на друга в определенном порядке вдоль условной оси Z, которая перпендикулярна экрану.

Значение по умолчанию: auto
Применяется к: Позиционированные элементы
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: CSS 2, 3

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

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

z-index: integer | auto | initial | inherit

Примеры написания кода свойства z-index:

div {
    position: absolute;
    lop: 30px;
    left: 30px;
    z-index: 2;
}

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

В следующей таблице описаны значения этого свойства.

Значение Описание
integer Устанавливает значение (index) элемента, значение которого будет применяться для перекрывающих друг друга элементов с position отличной от static. Допускаются отрицательные целочисленные значения.
auto Позиционированные элементы будут накладваться в том порядке, в котором они объявленны в DOM-документе. Это значение установлено по умолчанию.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента z-index.

Поддержка браузеров

Свойство z-index поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.