Dalam CSS, anda boleh menggunakan atribut z-index untuk menetapkan tahap Atribut ini boleh menetapkan susunan susunan elemen dengan susunan tindanan yang lebih tinggi akan sentiasa berada di hadapan elemen dengan susunan susunan yang lebih rendah ; Format sintaks "z-index:numeric;", nilai negatif dibenarkan.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam css, anda boleh menggunakan atribut z-index untuk menetapkan tahap.
Atribut indeks-z menetapkan susunan susunan elemen. Elemen dengan susunan tindanan yang lebih tinggi akan sentiasa muncul di hadapan elemen dengan susunan tindanan yang lebih rendah. (Indeks Z hanya berfungsi pada elemen yang diposisikan).
Pelajar yang telah membuat reka letak halaman harus sangat mengenali atribut indeks-z ialah atribut khas untuk paparan halaman web. Oleh kerana corak yang dipaparkan oleh monitor ialah satah dua dimensi, ia mempunyai paksi-x dan paksi-y untuk mewakili atribut kedudukan. Untuk mewakili konsep tiga dimensi seperti susunan superposisi lapisan atas dan bawah elemen paparan, atribut indeks-z diperkenalkan untuk mewakili perbezaan dalam paksi-z. Menunjukkan hubungan tiga dimensi atas dan bawah bagi unsur dalam jujukan superposisi.
Elemen dengan nilai indeks z yang lebih besar akan ditindih pada elemen dengan nilai indeks z yang lebih kecil. Untuk objek diposisikan yang tidak dinyatakan, objek dengan nilai indeks z positif berada di atasnya dan objek dengan nilai indeks z negatif berada di bawahnya.
<div style="width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
Dua DIV, yang kedua naik 50px, situasi biasa sepatutnya begini
Tidak . Dua div meliputi div pertama Tambahkan atribut z-index
<div style="width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>
pada yang kedua dan hasilnya akan kelihatan seperti ini >
Hanya sah untuk elemen diposisikan
<div style="width:200px;height:200px;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>
Siapa yang naik dan siapa yang turun dengan indeks-z yang sama
1. Jika dua Jika kedua-dua elemen tidak diposisikan dan pertindihan berlaku, atau dua elemen diletakkan dan mempunyai indeks-z yang sama dan pertindihan berlaku, maka mengikut susunan aliran dokumen, yang kemudian akan menimpa yang sebelumnya.
<div style="position:relative;width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
2 Jika kedua-dua elemen tidak ditetapkan kepada indeks-z, nilai lalai digunakan, satu diposisikan dan satu lagi tidak diletakkan, maka elemen diposisikan. meliputi elemen tidak berkedudukan
<div style="position:relative;top:50px;width:200px;height:200px;"></div> <div style=" width:100px;height:100px;"><div>
Pemprosesan hubungan ibu bapa-anak
<div style="position:relative;width:200px;height:200px;z-index:10;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div>
Jika elemen induk Jika indeks-z unsur tidak sah (tidak diletakkan atau menggunakan nilai lalai), maka indeks-z tetapan elemen anak diposisikan berkuat kuasa
z-index=-5 elemen anak berkuat kuasa dan ditimpa oleh elemen induk<div style="position:relative;width:200px;height:200px;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div>
Elemen anak antara adik beradik
<div style="position:relative;width:100px;height:100px;z-index:5;"> <div style="position:relative;width:50px;height:250px;z-index:50;"></div> </div> <div style="position:relative;width:100px;height:100px;z-index:10;margin-top:4px;"> <div style="position:relative;width:30px;height:150px;z-index:-10;"></div> </div>
(Mempelajari perkongsian video:
tutorial video cssAtas ialah kandungan terperinci Bagaimana untuk menyediakan hubungan hierarki css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!