⌘K

Свойство z-index

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

Синтаксис

cssселектор {
  z-index: число | auto;
}

Число должно быть целым, положительным или отрицательным. Может быть нулем.

Значения

Значение Описание
Число Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого z-index больше.
auto Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в HTML коде.

Значение по умолчанию: auto.

Пример

В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде (z-index не задан и будет иметь значение по умолчанию - auto). Первый блок будет в самом низу (красный), а последний - выше всех (зеленый): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Пример

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

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

НазадСвойство positionДальшеПсевдоэлемент backdrop