Īpašība z-index

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

Sintakse

selektors {
	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ļš):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#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):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

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