Подкаст 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 не работает, какое свойство следует проверить на своем элементе?
position
display
animation
relative
Нужна ли flexbox и сетка position: relative
?
Подкаст 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 не работает, какое свойство следует проверить на своем элементе?
position
relative
animation
display
Нужна ли flexbox и сетка position: relative
?