z-index xususiyati

z-index xususiyati bir nechta elementlar bir-biriga qoplanganda, kim yuqorida bo'lishini belgilaydi.

Sintaksis

selector {
	z-index: son | auto;
}

Son butun, musbat yoki manfiy bo'lishi kerak. Nol bo'lishi mumkin.

Qiymatlar

Qiymat	Ta'rif
Son	Butun son elementlarning qoplanish tartibini belgilaydi: elementlar bir-biriga qoplanganda, yuqorida `z-index`i katta bo'lgani bo'ladi.
`auto`	Qoplanish tartibi avtomatik quriladi: yuqorida HTML kodida pastroq joylashgan element bo'ladi.

Standart qiymat: auto.

Misol

Ushbu misolda bloklar bir-biriga HTML kodidagi ketma-ketlik tartibida qoplanadi (z-index o'rnatilmagan va standart qiymatga ega - auto). Birinchi blok eng pastda (qizil), oxirgisi - eng yuqorida (yashil) bo'ladi:

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

Misol

z-indexni o'rnatib, qoplanish tartibini o'zgartiramiz. Qizil blokka - 3, ko'k blokka - 2, yashil blokka - 1. Qoplanish tartibi teskari o'zgaradi (eng yuqorida z-indexi 3 bo'lgan blok bo'ladi):

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