Sifa z-index

Sifa z-index inaweka, nani atakuwa juu ikiwa vipengele kadhaa vimewekwa juu ya kila mmoja.

Kiufundi (Syntax)

kichaguli {
	z-index: nambari | auto;
}

Nambari lazima iwe kamili, chanya au hasi. Inaweza kuwa sifuri.

Thamani

Thamani	Maelezo
Nambari	Nambari kamili huweka mpangilio wa kuwekewa vipengele: vikivikwa juu ya kila mmoja, juu kabisa huwa kile ambacho kina `z-index` kubwa zaidi.
`auto`	Mpangilio wa kuwekewa hujengwa moja kwa moja: juu zaidi hutakuwa kile kipengele kilichopo chini zaidi kwenye msimbo wa HTML.

Thamani chaguomsingi: auto.

Mfano

Katika mfano huu, vitalu vitavekwa juu ya kila mmoja kulingana na mpangilio wao kwenye msimbo wa HTML (z-index haijawekwa na itakuwa na thamani chaguomsingi - auto). Kizuizi cha kwanza kitakuwa chini kabisa (nyekundu), na cha mwisho - juu kabisa (kijani):

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

Mfano

Wacha tubadilishe mpangilio wa kuwekewa, kwa kuweka z-index. Kizuizi chekundu - 3, kibluu - 2, kikijani - 1. Mpangilio wa kuwekewa utabadilika kuwa wa kinyume (juu kabisa kitakuwa kizuizi chenye 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;
}