CSS z-index: что это?

CSS свойство z-index используется для управления стеком элементов на веб-странице. Оно определяет порядок отображения элементов с учетом их пространственных координат на основе значения z-index. Значение z-index может быть положительным или отрицательным числом, а также auto.

Когда браузер рендерит веб-страницу, каждый элемент имеет ряд координат x, y и z. Ось z воспринимается как ось глубины, при этом значение z-index указывает, какой элемент будет отображаться поверх других элементов или наоборот. Значение z-index может изменяться в шагах, например, 1, 2, 3 и так далее, но можно использовать и отрицательные значения, например, -1, -2, -3 и так далее. Значение по умолчанию - auto - позволяет браузеру самостоятельно определить порядок отображения элементов.

Рассмотрим пример использования свойства z-index. Предположим, у нас есть два HTML элемента: <div id="blue"> и <div id="red">.

HTML код:

<div id="blue">
    <p>Синий блок</p>
</div>
<div id="red">
    <p>Красный блок</p>
</div>

CSS стили:

#blue {
    background-color: blue;
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 2;
}

#red {
    background-color: red;
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 1;
}

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

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

#text {
    position: relative;
    z-index: 1;
}

#image {
    position: relative;
    z-index: 2;
}

Таким образом, изображение будет отображаться поверх текста.

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

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