⌘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