Z-индекс¶

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

CSS подкаст

019: Z-индекс и контексты суммирования

Перевод на русскийАнглийский оригинал

Допустим, у вас есть несколько элементов, которые абсолютно позиционированы и должны располагаться друг над другом. Вы можете написать HTML примерно так:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

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

Z-index¶

Свойство z-index явно задает порядок слоев в HTML на основе трехмерного пространства браузера — оси Z. Именно эта ось показывает, какие слои находятся ближе, а какие дальше от вас. Вертикальная ось в Интернете — это ось Y, а горизонтальная ось — ось X.

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

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

Однако это не так, если вы находитесь в контексте flexbox или grid, поскольку вы можете изменять z-index элементов flex или grid без добавления position: relative.

Отрицательный z-index¶

Чтобы установить элемент за другим элементом, добавьте отрицательное значение для z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

Пока .my-element имеет начальное значение z-index равное auto, элемент .child будет располагаться за ним.

Добавьте следующий CSS к .my-element, и элемент .child не будет располагаться за ним.

.my-element {
    position: relative;
    z-index: 0;
    background: rgb(232 240 254 / 0.4);
}

Поскольку .my-element теперь имеет значение position, которое не является static, и значение z-index, которое не является auto, он создал новый контекст стекирования. Это означает, что даже если задать .child значение z-index равное -999, он все равно не будет располагаться за .my-parent.

Контекст суммирования¶

Контекст суммирования — это группа элементов, имеющих общего родителя и перемещающихся вверх и вниз по оси z вместе.

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

Значение z-index элементов внутри контекста суммирования всегда относительно текущего порядка родителя в его собственном контексте суммирования.

Элемент <html> сам по себе является контекстом суммирования, и за ним ничего не может находиться. За элементом <body> можно размещать что-либо до тех пор, пока не будет создан контекст суммирования с ним.

Создание контекста суммирования¶

Для создания нового stacking context не обязательно применять z-index и position. Вы можете создать новый контекст, добавив значение для свойств, создающих новый составной слой, таких как opacity, will-change и transform. Полный список свойств можно посмотреть здесь.

Чтобы объяснить, что такое составной слой, представьте, что веб-страница — это холст. Браузер берет ваши HTML и CSS и использует их для определения размера холста. Затем он рисует страницу на этом холсте. Если элемент изменится, например, изменится его положение, браузеру придется вернуться и заново определить, что рисовать.

Для повышения производительности браузер создает новые составные слои, которые накладываются поверх холста. Эти слои похожи на записки: перемещение одного из них и его изменение не оказывают большого влияния на общую картину холста. Новый составной слой создается для элементов с opacity, transform и will-change, поскольку вероятность их изменения очень высока, поэтому браузер заботится о том, чтобы изменения происходили как можно быстрее, используя GPU для применения стилевых корректировок.

Также можно создать контекст суммирования, добавив filter и установив backface-visibility: hidden.

Ресурсы¶

Источник — Z-index and stacking contexts