Sifat CSS z-index

Pengertian dan penggunaan

Sifat zIndex menetapkan susunan tingkat tumpuan elemen. Elemen dengan tingkat tumpuan yang tinggi akan selalu berada di hadapan elemen dengan tingkat tumpuan yang rendah.

Komen:Elemen boleh mempunyai nilai z-index negatif.

Komen:Z-index hanya berkesan di elemen pengukuran (contohnya position:absolute;)!

Pengarahan

Sifat ini menetapkan kedudukan elemen pengukuran di sepanjang sumbu z, sumbu z ditakrifkan sebagai sumbu yang menyebar vertikal ke kawasan papan tampilan. Jika nombor adalah positif, ia jauh daripada pengguna, jika negatif, ia mendekati pengguna.

Lihat juga:

Panduan CSS:Pengukuran CSS

Panduan HTML DOM:Sifat zIndex

Contoh

Tetapkan z-index untuk imej:

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

Cuba sendiri

Rumus CSS

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

Nilai sifat

Nilai Penerangan
auto Lalai. Susunan tingkat tumpuan sama dengan elemen bapa.
number Tetapkan susunan tingkat tumpuan elemen.
inherit Ditentukan supaya nilai z-index milik elemen turun dari elemen bapa.

Perincian teknologi

Nilai lalai: auto
Inheren: tidak
Versi: CSS2
Rumus JavaScript: object.style.zIndex="1"

Contoh lebih banyak

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

Pendukung pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang mendukung sifat ini.

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