Properti z-index
Properti z-index mengatur, elemen mana
yang akan berada di atas jika beberapa elemen
saling menumpuk satu sama lain.
Sintaks
selektor {
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):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#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):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#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;
}
: