Пример стековой области 2

Описание

Это очень простой пример, но он ключевой для понимания концепции стековой области. Здесь те же четыре DIV, что и в предыдущем примере, но теперь z-index свойства заданы на обоих уровнях иерархии.

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

Что может показаться странным, так это то, что DIV #2 (z-index: 2) находится над DIV #4 (z-index: 10), несмотря на их значения z-индекса. Причина в том, что они не принадлежат одной и той же стековой области. DIV #4 принадлежит стековой области, созданной DIV #3, и, как было объяснено ранее, DIV #3 (и всё его содержимое) находится под DIV #2.

Для лучшего понимания ситуации вот иерархия стековых областей:

Корневая стековая область
- DIV #2 (z-index: 2)
- DIV #3 (z-index: 1)
  - DIV #4 (z-index: 10)

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

Пример

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: 2;
  </div>
</div>

<br />

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

CSS

div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

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

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

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

Результат

См. также

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