Укладка без свойства z-index

Когда свойство z-index не указано ни для одного элемента, элементы укладываются в следующем порядке (снизу вверх):

Фон и границы корневого элемента.
Дочерние элементы без позиционирования, в порядке их появления в HTML.
Дочерние позиционированные элементы, в порядке их появления в HTML.

См. типы позиционирования для объяснения позиционированных и непозиционированных элементов.

Обратите внимание, когда свойство order изменяет отрисовку от порядка появления в HTML внутри контейнеров flex, оно аналогичным образом влияет на порядок для контекста укладки.

Пример

В этом примере DIV #1 до DIV #4 — позиционированные элементы. DIV #5 — статический, и поэтому он отображается ниже других четырёх элементов, даже если он указан позже в разметке HTML.

HTML

<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>

CSS

strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

Результат

См. также

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