z-index Özelliği

z-index özelliği, birden fazla eleman birbirinin üzerine geldiğinde hangisinin üstte olacağını belirler.

Sözdizimi

seçici {
	z-index: sayı | auto;
}

Sayı tam sayı olmalıdır, pozitif veya negatif olabilir. Sıfır da olabilir.

Değerler

Değer	Açıklama
Sayı	Tam sayı, elemanların üst üste gelme sırasını belirler: elemanlar birbirinin üzerine geldiğinde, üstte `z-index` değeri daha büyük olan eleman görünür.
`auto`	Üst üste gelme sırası otomatik olarak oluşturulur: HTML kodunda daha aşağıda bulunan eleman üstte görünür.

Varsayılan değer: auto.

Örnek

Bu örnekte, bloklar HTML kodundaki sıralarına göre üst üste gelecektir (z-index belirtilmemiş ve varsayılan değeri olan auto olacaktır). İlk blok en altta (kırmızı), son blok ise en üstte (yeşil) olacaktır:

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

Örnek

z-index belirterek üst üste gelme sırasını değiştirelim. Kırmızı bloğa - 3, mavi bloğa - 2, yeşil bloğa - 1 değerini verelim. Üst üste gelme sırası tersine dönecektir (en üstte z-index değeri 3 olan blok olacaktır):

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