⌘K

Z-index xassəsi

z-index xassəsi bir neçə element bir-birinın üzərinə düşdükdə, hansının yuxarıda olacağını təyin edir.

Sintaksis

cssselektor {
  z-index: ədəd | auto;
}

Ədəd tam, müsbət və ya mənfi ola bilər. Sıfır da ola bilər.

Dəyərlər

Dəyər Açıqlama
Ədəd Tam ədəd elementlərin üst-üstə düşmə sırasını təyin edir: elementlər bir-birinin üzərinə düşdükdə, yuxarıda z-index dəyəri böyük olan element olacaq.
auto Üst-üstə düşmə sırası avtomatik qurulur: yuxarıda HTML kodunda aşağıda yerləşən element olacaq.

Standart dəyər: auto.

Nümunə

Bu nümunədə bloklar HTML kodundakı sıralarına görə bir-birinin üzərinə düşəcək (z-index təyin edilməyib və standart dəyəri olan auto olacaq). Birinci blok ən aşağıda (qırmızı), sonuncu blok isə ən yuxarıda (yaşıl) olacaq: 

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

Результат:

Nümunə

z-index təyin edərək üst-üstə düşmə sırasını dəyişək. Qırmızı bloka - 3, mavi bloka - 2, yaşıl bloka - 1 təyin edək. Üst-üstə düşmə sırası əksinə dəyişəcək (ən yuxarıda z-index 3 olan blok olacaq): 

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

Результат:

BackXüsusiyyət positionNextPsevdoelement backdrop