Properti z-index

Properti z-index mengatur, elemen mana yang akan berada di atas jika beberapa elemen saling menumpuk satu sama lain.

Sintaks

cssselektor {
  z-index: angka | auto;
}

Angka harus berupa bilangan bulat, positif atau negatif. Bisa juga nol.

Nilai

Nilai	Keterangan
Angka	Bilangan bulat menentukan urutan penumpukan elemen: ketika elemen-elemen saling menumpuk, yang berada di atas adalah elemen dengan `z-index` yang lebih besar.
`auto`	Urutan penumpukan dibangun secara otomatis: yang akan berada di atas adalah elemen yang posisinya lebih bawah dalam kode HTML.

Nilai default: auto.

Contoh

Dalam contoh ini, blok-blok akan saling menumpuk sesuai urutan mereka dalam kode HTML (z-index tidak ditentukan dan akan memiliki nilai default - auto). Blok pertama akan berada di paling bawah (merah), dan blok terakhir - di 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 urutan penumpukan dengan menentukan z-index. Blok merah - 3, biru - 2, hijau - 1. Urutan penumpukan akan berubah menjadi kebalikan (paling atas adalah 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;
}

Результат: