Properti z-index CSS

Definisi dan penggunaan

Properti z-index menetapkan urutan tumpukan elemen. Elemen dengan urutan tumpukan yang lebih tinggi selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah.

Komentar:Elemen dapat memiliki nilai properti z-index negatif.

Komentar:Z-index hanya berfungsi di elemen yang berlokasi (contoh position:absolute;)

Keterangan

Properti ini menetapkan posisi elemen yang berlokasi menurut sumbu z, z-sumbu didefinisikan sebagai sumbu yang menyebar vertikal ke area tampilan. Jika angka positif, maka lebih dekat dengan pengguna, jika negatif maka lebih jauh dari pengguna.

Lihat pula:

Panduan CSS:Posisi CSS

Panduan referensi HTML DOM:Z-index properti

Contoh

Setel Z-index gambar:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Coba sendiri

Syntaks CSS

z-index: auto|number|initial|inherit;

Nilai properti

Nilai Deskripsi
auto Standar. Urutan tumpukan sama dengan elemen induk.
number Menetapkan urutan tumpukan elemen.
inherit Diatur untuk mendapatkan nilai properti z-index dari elemen induk.

Detil teknis

Nilai standar: auto
Inheritance: no
Versi: CSS2
Syntaks JavaScript: object.style.zIndex="1"

Contoh lebih banyak

Z-index
Z-index dapat digunakan untuk menempatkan elemen di belakang elemen lain.
Z-index
Elemen di contoh sebelumnya telah diubah Z-index.

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini penuh.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0