⌘K

Īpašība z-index

Īpašība z-index nosaka, kurš būs augšā gadījumā, ja vairāki elementi tiek uzlikti viens otram.

Sintakse

cssselektors {
  z-index: skaitlis | auto;
}

Skaitlim jābūt veselam, pozitīvam vai negatīvam. Var būt nulle.

Vērtības

Vērtība Apraksts
Skaitlis Vesels skaitlis nosaka elementu uzlikšanas kārtību: uzliekot elementus viens otram, augšā nonāks tas, kuram z-index ir lielāks.
auto Uzlikšanas kārtība tiek veidota automātiski: augšā būs tas elements, kas atrodas zemāk HTML kodā.

Noklusējuma vērtība: auto.

Piemērs

Šajā piemērā bloki tiks uzlikti viens otram to secībā HTML kodā (z-index nav norādīts un būs noklusējuma vērtība - auto). Pirmais bloks būs pašā apakšā (sarkans), bet pēdējais - visaugšāk (zaļš): 

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

Результат:

Piemērs

Mainīsim uzlikšanas kārtību, norādot z-index. Sarkanajam blokam - 3, zilajam - 2, zaļajam - 1. Uzlikšanas kārtība mainīsies uz pretējo (visaugšāk būs bloks ar 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Īpašība positionNextPseidoelements backdrop