Sebagian besar properti CSS mudah digunakan. Seringkali, saat Anda menggunakan properti CSS pada elemen bahasa markup, hasilnya langsung muncul saat Anda menyegarkan halaman. Properti CSS lainnya lebih kompleks dan hanya akan berfungsi dalam keadaan tertentu.
Atribut Z-index termasuk dalam kelompok terakhir yang disebutkan di atas. Indeks-Z tidak diragukan lagi menyebabkan kebingungan (kompatibilitas) dan frustrasi (psikologi pengembang) lebih sering daripada atribut lainnya. Namun lucunya, setelah Anda benar-benar memahami indeks-Z, Anda akan menemukan bahwa ini adalah properti yang sangat mudah digunakan, dan akan memberikan bantuan yang ampuh dalam memecahkan banyak tantangan tata letak.
Dalam artikel ini, kami akan menjelaskan dengan tepat apa itu indeks Z, mengapa indeks ini masih kurang dipahami, dan membahas beberapa masalah praktis seputar penggunaannya. Kami juga akan menjelaskan beberapa perbedaan browser-ke-browser yang akan Anda temui, yang merupakan masalah unik yang ada pada versi IE dan Firefox yang ada. Perspektif komprehensif tentang atribut Z-index ini akan memberi pengembang landasan kepercayaan yang baik dan bantuan yang kuat saat menggunakan atribut Z-index.
Apa ini?
Atribut Z-index menentukan tingkat penumpukan elemen HTML. Tingkat penumpukan suatu elemen relatif terhadap posisi elemen pada sumbu Z (berlawanan dengan sumbu X atau sumbu Y). Nilai indeks Z yang lebih tinggi berarti elemen tersebut akan berada lebih dekat ke atas dalam urutan penumpukan. Urutan pelapisan ini disajikan sepanjang sumbu ulir vertikal.
Untuk memberikan gambaran yang lebih jelas tentang cara kerja indeks-Z, gambar di atas membesar-besarkan posisi visual elemen bertumpuk.
urutan pelapisan alami
Dalam halaman HTML, urutan penumpukan alami (yaitu urutan elemen pada sumbu Z) ditentukan oleh banyak faktor. Berikut ini adalah daftar, yang menampilkan item daftar dalam konteks bertumpuk (belum ditemukan terjemahan bahasa Mandarin yang sesuai, ini harus merujuk pada lingkungan penumpukan di mana elemen bertumpuk berada). lingkungan. Tak satu pun item dalam daftar ini yang diberi atribut indeks-Z.
Latar belakang dan batas elemen menciptakan konteks bertumpuk
Mengutip:
·Penumpukan elemen konteks dengan nilai negatif disusun menurut urutan kemunculannya (semakin tinggi levelnya, semakin tinggi)
·Elemen tingkat blok yang tidak diposisikan atau melayang disusun menurut urutan tampilannya.
·Elemen mengambang yang tidak diposisikan disusun menurut urutan tampilannya.
·Elemen sebaris disusun menurut urutan tampilannya.
·Elemen yang diposisikan disusun menurut urutan tampilannya.
Properti Z-index, bila digunakan dengan benar, mengubah urutan penumpukan alami.
Tentu saja, susunan elemen tidak terlalu jelas kecuali jika ditempatkan saling tumpang tindih. Di bawah ini, sebuah KOTAK dengan margin negatif ditampilkan untuk mengilustrasikan urutan penumpukan alami.
BOX di atas ditentukan dengan warna latar belakang dan batas yang berbeda, dan dua warna terakhir diatur secara terhuyung-huyung dan menentukan margin atas negatif, sehingga kita dapat melihat urutan penumpukan alami. KOTAK berwarna abu-abu berada di peringkat pertama, KOTAK biru di peringkat kedua, dan kotak emas di peringkat ketiga. Margin negatif yang diterapkan dengan jelas menunjukkan fakta bahwa elemen-elemen ini tidak memiliki kumpulan properti indeks-Z; urutan penumpukannya alami, atau aturan gabungan default. Fenomena interlacing disebabkan oleh margin negatif.