Хосияти 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;
}