Atur z-index di Your Code - dummies

Bila Anda menggunakan posisi absolut, Anda dapat menentukan dengan pasti di mana benda diletakkan, jadi mungkin bagi mereka untuk tumpang tindih. Secara default, elemen yang dijelaskan kemudian dalam HTML diposisikan di atas elemen yang dijelaskan sebelumnya.

Menangani kedalaman dalam CSS

Anda dapat menggunakan atribut CSS khusus yang disebut z-index untuk mengubah perilaku default ini. The z -axis mengacu pada seberapa dekat sebuah elemen tampak bagi penampil. Gambar ini menunjukkan bagaimana ini bekerja.

Indeks z-index memungkinkan Anda mengubah elemen mana yang tampak lebih dekat dengan pengguna.

Atribut z-index memerlukan nilai numerik. Angka yang lebih tinggi berarti elemen lebih dekat ke pengguna (atau di atas). Nilai apapun untuk z-index menempatkan elemen lebih tinggi dari elemen dengan indeks z-index . Ini bisa sangat berguna bila Anda memiliki elemen yang ingin Anda tampilkan di atas elemen lainnya (misalnya, menu yang sementara muncul di atas teks lainnya).

Inilah kode yang menggambarkan efek z-index :

zindex. html

#blueBox {

background-color: blue; Lebar

: 100px;

tinggi: 100px;

posisi: absolut;

kiri: 0px;

atas: 0px;

margin: 0px;

z-index: 1;

}

#blackBox {

background-color: black; Lebar

: 100px;

tinggi: 100px;

posisi: absolut;

kiri: 50px;

atas: 50px;

margin: 0px;

}

Bekerja dengan z-index

Satu-satunya perubahan dalam kode ini adalah penambahan properti z-index . Semakin tinggi nilai z-index, semakin dekat objek itu bagi pengguna.

Berikut adalah beberapa hal yang perlu diingat saat menggunakan z-index :

• Salah satu elemen dapat menyembunyikan yang lain. Ketika Anda mulai memposisikan sesuatu secara mutlak, satu elemen sepertinya bisa hilang karena sepenuhnya tertutup oleh yang lain. Atribut z-index adalah cara yang baik untuk memeriksa situasi ini.
• Negatif z-index dapat menjadi masalah. Nilai z-index harus positif. Meskipun nilai negatif didukung, beberapa browser (terutama versi Firefox) tidak menangani mereka dengan baik dan dapat menyebabkan elemen Anda hilang.
• Sebaiknya beri semua nilai indeks z-index . Jika Anda mendefinisikan z-index untuk beberapa elemen dan biarkan z-index tidak terdefinisi untuk orang lain, Anda tidak menjamin apa yang akan terjadi. Jika ragu, berikan saja nilai z8 , dan Anda akan tahu persis apa yang harus tumpang tindih dengan apa. Jangan memberi dua elemen z8
• yang sama . Titik z-index adalah untuk secara jelas menentukan elemen mana yang harus tampak lebih dekat. Jangan kalahkan tujuan ini dengan menetapkan nilai z-index yang sama ke dua elemen yang berbeda pada halaman yang sama.