Z-indeksi häsiýeti

z-index häsiýeti birnäçe element bir-biriniň üstüne düşýän ýagdaýda kimň ýokarsynda boljakdygyny belgileýär.

Sintaksis

selektor {
	z-index: san | auto;
}

San bitin, öňürtin ýa-da ters san bolmaly. Nullam bolup biler.

Görnüşleri

Görnüşi	Düşündiriş
San	Bitin san elementleriň üst-üst düşürilmeginiň tertibini belläýär: bir-biriniň üstüne düşýän elementlerden ýokarsynda `z-index` iň uly bolany ýerleşer.
`auto`	Üst-üst düşüriliş tertibi awtomatiki ýöredilýär: ýokarsynda HTML kodynda aşakda ýerleşýän element bolýar.

Bellige göräniň görnüşi: auto.

Mysal

Bu mysalda bloklar HTML kodynda ýerleşiş tertibinde bir-biriniň üstüne düşer (z-index bellänok we bellige göräniň görnüşine - auto eýe bolar). Birinji blok iň aşakda (gyzyl), iň soňky bolsa iň ýokarda (ýaşyl) bolar:

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

Mysal

z-index belläp, üst-üst düşüriliş tertibini üýtgedeliň. Gyzyl bloka - 3, gök bloka - 2, ýaşyl bloka - 1 belläýäris. Üst-üst düşüriliş tertibi tersine üýtgär (iň ýokarda z-index 3 bolan blok bolar):

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