Что такое z-index?

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

Как работает z-index?

Каждому элементу может быть присвоено числовое значение z-index. Чем больше значение, тем выше уровень наложения элемента. Например, элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1. Если значения одинаковы, порядок отображения будет определяться порядком следования элементов в HTML.

Пример использования z-index

<div class="box box1">Я с z-index 1</div>
<div class="box box2">Я с z-index 2</div>
<div class="box box3">Я без z-index</div>

.box {
    width: 200px;
    height: 200px;
    position: absolute;
}

.box1 {
    background-color: red;
    z-index: 1; /* Элемент 1 */
}

.box2 {
    background-color: blue;
    z-index: 2; /* Элемент 2 */
}

.box3 {
    background-color: green;
    /* Элемент 3 не имеет z-index, поэтому будет ниже */
}

В этом примере синий квадрат (box2) будет отображаться сверху красного (box1), а зеленый квадрат (box3) будет находиться под обоими.

Что такое контекст наложения?

Контекст наложения (stacking context) — это трехмерная модель, которая позволяет браузеру решать порядок наложения элементов. Каждый контекст наложения содержит элементы, которые могут взаимодействовать с z-index.

Как формируется контекст наложения?

Контекст наложения создается в следующих случаях:

Пример создания контекста наложения

<div class="container" style="position: relative; z-index: 1;">
    <div class="box box1">Контекст 1</div>
    <div class="box box2" style="position: relative; z-index: 2;">Контекст 2 (новый контекст)</div>
    <div class="box box3">Контекст 3</div>
</div>

.box {
    width: 100px;
    height: 100px;
    position: absolute;
}

.box1 {
    background-color: red;
}

.box2 {
    background-color: blue;
}

.box3 {
    background-color: green;
}

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

Заключение

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