Z-индекс и контексты стекирования

Подкаст CSS – 019: z-индекс и контексты стекирования

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

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

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

Z-индекс

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

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

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

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

Отрицательный z-индекс

Чтобы разместить элемент позади другого элемента, добавьте отрицательное значение для 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 элементов внутри контекста стекирования всегда относится к текущему порядку родительского элемента в его собственном контексте стекирования.

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

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

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

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

Ресурсы

• Форсирование слоев
• Руководство по анимации: принудительное создание слоя
• Понимание z-индекса

Проверьте свое понимание

Проверьте свои знания о z-index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>