skip to main content

z-index

css

Кратко 🔗

Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.

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

Пример 🔗

Возьмём самую частую ситуацию, где пригождается z-index — наложение полупрозрачной вуали поверх блока с фоном и текстом.

У нас будет разметка для шапки сайта:

<header>
<h1>Шапка сайта с классным заголовком</h1>
</header>

Для header мы зададим фоновое изображение и псевдоэлемент :after с полупрозрачной вуалью чтобы затемнить фон и чтобы текст лучше читался.

header {
position: relative;
background: url("landscape.jpg") no-repeat center / cover;
}

header:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(125 20 204 / 0.5); /* Полупрозрачный фиолетовый */
}

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

Нам такой эффект не нужен. Текст должен быть поверх вуали. Чем выше значение z-index, тем выше элемент в стопке наложения.

Добавим пару свойств:

header {
z-index: 0;
}

header:after {
z-index: -1; /* Опускаем вуаль ниже текста */
}

Как пишется 🔗

Значением свойства z-index может быть отрицательное или положительное целое число.

z-index: auto; /* Значение по умолчанию */
z-index: 0;
z-index: -1;
z-index: 1;
z-index: 9999999;
z-index: -999999;

/* Глобальные значения */
z-index: inherit;
z-index: initial;
z-index: unset;

Как это понять 🔗

Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z-index.

Подсказки 🔗

💡 z-index срабатывает только для элементов с позиционированием (свойство position), отличающимся от статичного (значения relative / absolute / fixed / sticky).

💡 Исключение из правил: z-index работает с элементами, у которых значение свойства opacity меньше 1. Например, трюк с opacity: 0.999 почти не повлияет на внешний вид, но позволит использовать z-index без изменения позиционирования элемента.

💡 Если z-index не указан, то блоки накладываются друг на друга в том порядке, в котором указаны в разметке. Чем ниже в разметке тем выше в стопке. А если указан, то стопка блоков формируется согласно значению этого свойства.

В работе 🔗

🛠 Часто вижу такие записи z-index: 99999. Видимо, это нужно чтобы СОВЕРШЕННО ТОЧНО блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Лично я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно.

Автор: Алёна,