Z-index xassəsi

z-index xassəsi bir neçə element bir-birinın üzərinə düşdükdə, hansının yuxarıda olacağını təyin edir.

Sintaksis

selektor {
	z-index: ədəd | auto;
}

Ədəd tam, müsbət və ya mənfi ola bilər. Sıfır da ola bilər.

Dəyərlər

Dəyər	Açıqlama
Ədəd	Tam ədəd elementlərin üst-üstə düşmə sırasını təyin edir: elementlər bir-birinin üzərinə düşdükdə, yuxarıda `z-index` dəyəri böyük olan element olacaq.
`auto`	Üst-üstə düşmə sırası avtomatik qurulur: yuxarıda HTML kodunda aşağıda yerləşən element olacaq.

Standart dəyər: auto.

Nümunə

Bu nümunədə bloklar HTML kodundakı sıralarına görə bir-birinin üzərinə düşəcək (z-index təyin edilməyib və standart dəyəri olan auto olacaq). Birinci blok ən aşağıda (qırmızı), sonuncu blok isə ən yuxarıda (yaşıl) olacaq:

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

Nümunə

z-index təyin edərək üst-üstə düşmə sırasını dəyişək. Qırmızı bloka - 3, mavi bloka - 2, yaşıl bloka - 1 təyin edək. Üst-üstə düşmə sırası əksinə dəyişəcək (ən yuxarıda z-index 3 olan blok olacaq):

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