Пример контекста стекирования 1

Описание

Начнём с простого примера. В корневом контексте стекирования находятся два относительно позиционированных <div> элемента (DIV #1 и DIV #3) без свойств z-index. Внутри DIV #1 находится абсолютно позиционированный DIV #2, а в DIV #3 — абсолютно позиционированный DIV #4, оба без свойств z-index.

Единственный контекст стекирования — корневой контекст. Без значений z-index, элементы стекируются в порядке появления.

Stacking context example 1

Если DIV #2 присвоен положительный (ненулевой и не auto) индекс z, он отображается поверх всех остальных DIV.

Stacking context example 1

Затем, если DIV #4 также присвоен положительный индекс z, больший, чем индекс z DIV #2, он отображается поверх всех остальных DIV, включая DIV #2.

Stacking context example 1

В этом последнем примере вы видите, что DIV #2 и DIV #4 не являются соседями, потому что они принадлежат различным родителям в иерархии HTML-элементов. Несмотря на это, стекирование DIV #4 относительно DIV #2 может контролироваться с помощью z-index. Случается, что, поскольку DIV #1 и DIV #3 не имеют значений z-индекса, они не создают контекст стекирования. Это означает, что всё их содержимое, включая DIV #2 и DIV #4, принадлежит одному корневому контексту стекирования.

С точки зрения контекстов стекирования, DIV #1 и DIV #3 ассимилируются в корневой элемент, и полученная иерархия выглядит следующим образом:

Корневой контекст стекирования
- DIV #2 (z-index: 1)
- DIV #4 (z-index: 2)

Примечание: DIV #1 и DIV #3 не полупрозрачные. Важно помнить, что присвоение элементу с позиционированием непрозрачности меньше 1 неявным образом создаёт контекст стекирования, как и добавление значения z-index. И этот пример показывает, что происходит, когда родительский элемент не создаёт контекст стекирования.

Пример

HTML

<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>

CSS

.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}

Результат

См. также

Стекирование без свойства z-индекса: Правила стекирования, которые применяются, когда z-index не используется.
Стекирование плавающих элементов: Как обрабатываются плавающие элементы при стекировании.
Использование z-индекса: Как использовать 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_example_1