⌘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;
}

Результат:

BackСвойство positionNextПсевдоелемент backdrop