Sifat z-index
Sifat z-index menetapkan siapa
akan berada di atas sekiranya beberapa elemen
saling bertindih.
Sintaks
selector {
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):
<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 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):
<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;
}
: