Подкаст 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-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Какая статья по умолчанию находится вверху?
Если z-index не работает, какое свойство вашего элемента следует проверить?
displayrelativepositionstatic .animation Нужна ли flexbox и сетка position: relative ?
position: relative .