z-index Özelliği

z-index özelliği, birden fazla eleman birbirinin üzerine geldiğinde hangisinin üstte olacağını belirler.

Sözdizimi

cssseçici {
  z-index: sayı | auto;
}

Sayı tam sayı olmalıdır, pozitif veya negatif olabilir. Sıfır da olabilir.

Değerler

Varsayılan değer: auto.

Örnek

Bu örnekte, bloklar HTML kodundaki sıralarına göre üst üste gelecektir (z-index belirtilmemiş ve varsayılan değeri olan auto olacaktır). İlk blok en altta (kırmızı), son blok ise en üstte (yeşil) olacaktır:

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

Результат:

Örnek

z-index belirterek üst üste gelme sırasını değiştirelim. Kırmızı bloğa - 3, mavi bloğa - 2, yeşil bloğa - 1 değerini verelim. Üst üste gelme sırası tersine dönecektir (en üstte z-index değeri 3 olan blok olacaktır):

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

Результат: