Z-index հատկությունը

z-index հատկությունը սահմանում է, թե որ տարրը կլինի վերևում, երբ մի քանի տարրեր վերադրվում են մեկը մյուսի վրա:

Շարահյուսություն

ընտրող {
	z-index: թիվ | auto;
}

Թիվը պետք է լինի ամբողջ, դրական կամ բացասական: Կարող է լինել զրո:

Արժեքներ

Արժեք	Նկարագրություն
Թիվ	Ամբողջ թիվը սահմանում է տարրերի վերադրման կարգը. երբ տարրերը վերադրվում են մեկը մյուսի վրա, վերևում կլինի այն տարրը, որի `z-index`-ն ավելի մեծ է:
`auto`	Վերադրման կարգը կառուցվում է ավտոմատ. վերևում կլինի այն տարրը, որը գտնվում է HTML կոդում ավելի ներքև:

Լռելյայն արժեքը՝ auto:

Օրինակ

Այս օրինակում բլոկները կվերադրվեն մեկը մյուսի վրա ըստ HTML կոդում իրենց հերթականության (z-index-ը նշված չէ և կունենա լռելյայն արժեքը - auto): Առաջին բլոկը կլինի ամենաներքևում (կարմիր), իսկ վերջինը - ամենավերևում (կանաչ):

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

Օրինակ

Փոխենք վերադրման կարգը` նշելով z-index-ը: Կարմիր բլոկին - 3, կապույտին - 2, կանաչին - 1: Վերադրման կարգը կփոխվի հակառակի (ամենավերևում կլինի 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;
}