Menguruskan indeks z dalam Kod Anda - dummies

Apabila anda menggunakan kedudukan mutlak, anda boleh menentukan tepat di mana perkara diletakkan, jadi mungkin untuk bertindih. Secara lalai, elemen yang dijelaskan kemudian dalam HTML diletakkan di atas unsur-unsur yang dinyatakan sebelum ini.

Pengendalian kedalaman dalam CSS

Anda boleh menggunakan atribut CSS khusus yang dipanggil z-index untuk menukar tingkah laku lalai ini. z -axis merujuk kepada sejauh mana suatu elemen kelihatan kepada penonton. Imej ini menunjukkan bagaimana cara ini berfungsi.

The z-index membolehkan anda mengubah unsur mana yang kelihatan lebih dekat kepada pengguna.

Atribut z-index memerlukan nilai angka. Nombor yang lebih tinggi bermakna elemen lebih dekat dengan pengguna (atau di atas atas). Sebarang nilai untuk z-index meletakkan elemen lebih tinggi daripada elemen dengan default z-index . Ini boleh menjadi sangat berguna apabila anda mempunyai elemen yang anda mahu muncul di atas unsur-unsur lain (contohnya, menu yang muncul sementara di atas teks lain).

Berikut ialah kod yang menggambarkan kesan z-index :

zindex. html

#blueBox {

warna latar belakang: biru;

lebar: 100px;

ketinggian: 100px; Kedudukan

: mutlak;

kiri: 0px;

atas: 0px;

margin: 0px;

z-index: 1;

}

#blackBox {

warna latar belakang: hitam;

lebar: 100px;

ketinggian: 100px; Kedudukan

: mutlak;

kiri: 50px;

atas: 50px;

margin: 0px;

}

Bekerja dengan z-index

Satu-satunya perubahan pada kod ini adalah penambahan harta z-index . Semakin tinggi nilai z-indeks adalah, semakin dekat objek tersebut kelihatan kepada pengguna.

Berikut adalah beberapa perkara yang harus diingat apabila menggunakan z-index :

• Satu elemen boleh menyembunyikan yang lain. Apabila anda mula memposisikan sesuatu secara mutlak, satu elemen nampaknya hilang kerana ia benar-benar dilindungi oleh yang lain. Atribut z-index adalah cara yang baik untuk memeriksa keadaan ini.
• Negatif z-index boleh menjadi masalah. Nilai untuk z-index harus positif. Walaupun nilai negatif disokong, sesetengah pelayar (terutamanya Firefox versi lama) tidak mengendalikannya dengan baik dan boleh menyebabkan unsur anda hilang.
• Mungkin terbaik untuk memberikan semua nilai z-index . Sekiranya anda menentukan z-index untuk beberapa elemen dan meninggalkan z-index tidak ditentukan untuk orang lain, anda tidak menjamin apa yang akan berlaku. Sekiranya ragu-ragu, berikan saja setiap nilai z-index sendiri, dan anda akan tahu apa yang seharusnya bertindih apa.
• Jangan memberi dua elemen z-index yang sama. Titik z-index adalah untuk menentukan dengan jelas elemen mana yang akan kelihatan lebih dekat. Jangan mengalahkan tujuan ini dengan memberikan nilai z-index yang sama kepada dua elemen yang berbeza pada halaman yang sama.