⌘K

z-index xususiyati

z-index xususiyati bir nechta elementlar bir-biriga qoplanganda, kim yuqorida bo'lishini belgilaydi.

Sintaksis

cssselector {
  z-index: son | auto;
}

Son butun, musbat yoki manfiy bo'lishi kerak. Nol bo'lishi mumkin.

Qiymatlar

Qiymat Ta'rif
Son Butun son elementlarning qoplanish tartibini belgilaydi: elementlar bir-biriga qoplanganda, yuqorida z-indexi katta bo'lgani bo'ladi.
auto Qoplanish tartibi avtomatik quriladi: yuqorida HTML kodida pastroq joylashgan element bo'ladi.

Standart qiymat: auto.

Misol

Ushbu misolda bloklar bir-biriga HTML kodidagi ketma-ketlik tartibida qoplanadi (z-index o'rnatilmagan va standart qiymatga ega - auto). Birinchi blok eng pastda (qizil), oxirgisi - eng yuqorida (yashil) bo'ladi: 

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

Результат:

Misol

z-indexni o'rnatib, qoplanish tartibini o'zgartiramiz. Qizil blokka - 3, ko'k blokka - 2, yashil blokka - 1. Qoplanish tartibi teskari o'zgaradi (eng yuqorida z-indexi 3 bo'lgan blok bo'ladi): 

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

Результат:

Backposition xususiyatiNextPsevdoelement backdrop