Sifa z-index

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

Kiufundi (Syntax)

csskichaguli {
  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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

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

Результат: