Стековая последовательность z-index

Свойство z-index определяет стековую последовательность элементов.

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

Свойство z-index определяет порядок элемента в стеке, т. е. то, какой элемент будет на переднем плане, а какой за ним.

У элемента может быть положительная или отрицательная стековая последовательность:

Это заголовок

Из-за того, что у картинки z-index имеет значение -1, она расположена за текстом.


img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Внимание! Свойство z-index работает только с позиционированными элементами (со свойством position: absolute, position: relative, position: fixed или position: sticky) и элементами, являющимися прямыми потомками элемента со свойством display: flex.

Другой пример z-index

В следующем примере видно, что элемент с более высокой стековой последовательностью всегда перекрывает элемент с более низкой стековой последовательностью:


<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Черный прямоугольник</div>
  <div class="gray-box">Серый прямоугольник</div>
  <div class="green-box">Зеленый прямоугольник</div>
</div>

</body>
</html>

Результат:

Черный прямоугольник (z-index: 1)
Серый прямоугольник (z-index: 3)
Зеленый прямоугольник (z-index: 2)

Без z-index

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

Далее приводится предыдущий пример, но без определения z-index:


<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

Результат:

Черный прямоугольник
Серый прямоугольник
Зеленый прямоугольник

CSS свойство определения стековой последовательности элемента

СвойствоОписание
z-indexОпределяет стековую последовательность элемента