Sifat z-index

Sifat z-index menetapkan siapa akan berada di atas sekiranya beberapa elemen saling bertindih.

Sintaks

cssselector {
  z-index: nombor | auto;
}

Nombor mestilah integer, positif atau negatif. Boleh menjadi sifar.

Nilai

Nilai	Keterangan
Nombor	Integer menetapkan susunan penindihan elemen: apabila elemen bertindih antara satu sama lain, yang di atas adalah elemen yang mempunyai `z-index` lebih besar.
`auto`	Susunan penindihan dibina secara automatik: yang di atas akan menjadi elemen yang terletak lebih rendah dalam kod HTML.

Nilai lalai: auto.

Contoh

Dalam contoh ini, blok akan bertindih antara satu sama lain mengikut urutan dalam kod HTML (z-index tidak ditetapkan dan akan mempunyai nilai lalai - auto). Blok pertama akan berada di paling bawah (merah), dan yang terakhir - paling atas (hijau):

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

Результат:

Contoh

Mari ubah susunan penindihan dengan menetapkan z-index. Blok merah - 3, biru - 2, hijau - 1. Susunan penindihan akan berubah menjadi terbalik (paling atas akan menjadi blok dengan 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;
}

Результат: