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

Контекст стекирования — это трёхмерная концептуализация HTML-элементов вдоль воображаемой оси z относительно пользователя, который предполагается смотрящим на viewport или веб-страницу. HTML-элементы занимают это пространство в порядке приоритета, основанном на атрибутах элементов.

Описание

В предыдущей статье этого руководства, Использование z-index, мы показали, что порядок отрисовки определённых элементов зависит от их значения z-index. Это происходит потому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст стекирования.

Контекст стекирования формируется в любом месте документа любым элементом в следующих случаях:

Корневой элемент документа (<html>).
Элемент со значением position absolute или relative и значением z-index отличным от auto.
Элемент со значением position fixed или sticky (sticky для всех мобильных браузеров, но не для более старых браузеров настольных компьютеров).
Элемент со значением container-type size или inline-size установленным, предназначенным для запросов на основе контейнера.
Элемент, являющийся потомком контейнера flex, со значением z-index отличным от auto.
Элемент, являющийся потомком контейнера grid, со значением z-index отличным от auto.
Элемент со значением opacity меньшим 1.
Элемент со значением mix-blend-mode отличным от normal.
Элемент с любым из следующих свойств со значением отличным от none:
- transform
- scale
- rotate
- translate
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
Элемент со значением isolation isolate.
Элемент со значением will-change, определяющим любое свойство, которое создавало бы контекст стекирования при значении отличном от начального.
Элемент со значением contain layout, или paint, или составным значением, включающим одно из них (например, contain: strict, contain: content).
Элемент, помещённый в верхний слой и его соответствующий ::backdrop. Примеры включают элементы полноэкранного режима и поповера.
Элемент, у которого свойства, создающие контекст стекирования (например, opacity), были анимированы с использованием @keyframes, с animation-fill-mode, установленным на forwards.

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

Вкратце:

Контексты стекирования могут содержаться в других контекстах стекирования и вместе создавать иерархию контекстов стекирования.
Каждый контекст стекирования полностью независим от своих братьев: при обработке стекирования учитываются только дочерние элементы.
Каждый контекст стекирования самодостаточен: после того, как содержимое элемента было отсортировано, весь элемент рассматривается в порядке стекирования родительского контекста стекирования.

Примечание: Иерархия контекстов стекирования является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты стекирования. Можно сказать, что элементы, не создающие свой собственный контекст стекирования, ассимилируются родительским контекстом стекирования.

Пример

Example of stacking rules modified using z-index

В этом примере каждый позиционированный элемент создаёт свой собственный контекст стекирования из-за их позиционирования и z-index значений. Иерархия контекстов стекирования организована следующим образом:

Корень
- DIV #1
- DIV #2
- DIV #3
  - DIV #4
  - DIV #5
  - DIV #6

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются потомками DIV #3, поэтому стекирование этих элементов полностью решается внутри DIV #3. После завершения стекирования и отрисовки внутри DIV #3, весь элемент DIV #3 передаётся для стекирования в корневой элемент относительно его элементов-братьев.

DIV #4 отрисовывается под DIV #1, потому что z-индекс DIV #1 (5) действителен внутри контекста стекирования корневого элемента, в то время как z-индекс DIV #4 (6) действителен внутри контекста стекирования DIV #3. Таким образом, DIV #4 находится под DIV #1, потому что DIV #4 принадлежит DIV #3, который имеет меньшее значение z-индекса.

По той же причине DIV #2 (z-index: 2) отрисовывается под DIV#5 (z-index: 1), потому что DIV #5 принадлежит DIV #3, который имеет большее значение z-индекса.

z-индекс DIV #3 равен 4, но это значение независимо от z-индексов DIV #4, DIV #5 и DIV #6, потому что он принадлежит к другому контексту стекирования.

Простой способ определить порядок отрисовки элементов в стеке вдоль оси z — представить это как «номер версии», где дочерние элементы — это номера версии младше номера версии родительского элемента. Таким образом, мы легко можем увидеть, как элемент с z-индексом 1 (DIV #5) отображается над элементом с z-индексом 2 (DIV #2), и как элемент с z-индексом 6 (DIV #4) отображается под элементом с z-индексом 5 (DIV #1).

В нашем примере (отсортированном по окончательному порядку отрисовки):

Корень
- DIV #2: (z-index: 2)
- DIV #3: (z-index: 4)
  - DIV #5: (z-index: 1), расположено под элементом (z-index: 4), что приводит к порядку отрисовки 4.1
  - DIV #6: (z-index: 3), расположено под элементом (z-index: 4), что приводит к порядку отрисовки 4.3
  - DIV #4: (z-index: 6), расположено под элементом (z-index: 4), что приводит к порядку отрисовки 4.6
- DIV #1: (z-index: 5)

HTML

<div id="div1">
  <h1>Division Element #1</h1>
  <code>
    position: relative;<br />
    z-index: 5;
  </code>
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code>
    position: relative;<br />
    z-index: 2;
  </code>
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code>
      position: relative;<br />
      z-index: 6;
    </code>
  </div>

  <h1>Division Element #3</h1>
  <code>
    position: absolute;<br />
    z-index: 4;
  </code>

  <div id="div5">
    <h1>Division Element #5</h1>
    <code>
      position: relative;<br />
      z-index: 1;
    </code>
  </div>

  <div id="div6">
    <h1>Division Element #6</h1>
    <code>
      position: absolute;<br />
      z-index: 3;
    </code>
  </div>
</div>

CSS

* {
  margin: 0;
}
html {
  padding: 20px;
  font:
    12px/20px Arial,
    sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}

Результат

См. также

Стекирование без свойства z-index: Правила стекирования, которые применяются, когда z-index не используется.
Стекирование плавающих элементов: Как обрабатываются плавающие элементы при стекировании.
Использование z-index: Как использовать z-index для изменения стандартного стекирования.
Пример контекста стекирования 1: 2-уровневая иерархия HTML, z-index на последнем уровне
Пример контекста стекирования 2: 2-уровневая иерархия HTML, z-index на всех уровнях
Пример контекста стекирования 3: 3-уровневая иерархия HTML, z-index на втором уровне
Верхний слой

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context