⌘K

Хосияти z-index

Хосияти z-index муқаррар мекунад, ки кадом элемент болотар хоҳад буд, агар чанд элемент бар рӯи якдигар чойгир шаванд.

Синтаксис

cssинтихобкунанда {
  z-index: адад | auto;
}

Адад бояд бутун, мусбӣ ё манфӣ бошад. Метавонад сифр бошад.

Қиматҳо

Қимат Тавсиф
Адад Адади бутун тартиби чойгиркунии элементҳоро муайян мекунад: вақте ки элементҳо бар рӯи якдигар чойгир мешаванд, болотар он элементи хоҳад буд, ки z-index-и он калонтар аст.
auto Тартиби чойгиркунӣ худкор сохта мешавад: болотар он элемент хоҳад буд, ки дар рамзи HTML дар поёнтар ҷойгир аст.

Қимати пешфарз: auto.

Намуна

Дар ин намуна блокҳо бар рӯи якдигар дар тартиби пайравӣ дар рамзи HTML чойгир хоҳанд шуд (z-index муқаррар нашудааст ва қимати пешфарз - auto-ро дорад). Якумин блок дар хеле поён (сурх) хоҳад буд, ва охирин - болотар аз ҳама (сабз): 

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

Результат:

Намуна

Тартиби чойгиркуниро тағйир диҳем, z-index-ро муқаррар намоем. Ба блоки сурх - 3, ба кабудӣ - 2, ба сабз - 1. Тартиби чойгиркунӣ ба тарафи муқобил иваз мешавад (болотарин блоке бошад, ки 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;
}

Результат:

BackХусусияти positionNextПсевдоэлементи backdrop