⌘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