Penyelesaian kepada masalah tahap yang mutlak relatif tidak boleh menembusi_Pertukaran pengalaman

Jika kita menetapkan LI kepada position:relative; set span to position:absolute; maka kita akan mendapati bahawa tidak kira berapa tinggi nilai indeks-z SPAN, ia akan sentiasa berada di bawah induk di belakangnya.

Beberapa ketika dahulu, saya masih ingat seseorang bertanya soalan dalam kumpulan yang benar-benar membuat semua orang keliru:

<ul>   
<li>第一块</li>   
<li><span>第二块</span></li>   
<li>第三块</li>   
<li>第四块</li>   
<li>第五块</li>   
</ul>

Jika kita menetapkan LI kepada position:relative ;Set span to position:absolute; Kemudian kita akan mendapati bahawa tidak kira berapa tinggi nilai indeks-z SPAN ditetapkan, ia akan sentiasa berada di bawah induk di belakangnya.

*{margin:0; padding:0; list-style:none;}   
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}   
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

Mudah untuk mencari anak-anak kita dengan mencubanya Nilai indeks-z mencapai 1000 dan ditetapkan kepada position:absolut; Saya memikirkannya untuk masa yang lama, dan saya fikir masalah asasnya ialah: menetapkan kedudukan yang sama: relatif/mutlak tahap antara label tahap yang sama tidak boleh diatasi oleh indeks-z; Dalam contoh kami di atas, tahap LI pertama akan sentiasa lebih kecil daripada tahap LI seterusnya, jadi kami menetapkan position:absolute pada kanak-kanak dalam LI, memberikan nilai indeks z yang sangat tinggi.

Mungkin anda akan berfikir seperti ini: Bukankah lebih baik untuk menetapkan position:relative sahaja untuk LI dengan span? Sangat benar. Apabila tiada LI lain menetapkan position:relative maka anak yang kita perlukan boleh terapung di atas semua kandungan. Tetapi bagaimana jika, sebenarnya, rentang diperlukan dalam semua LI, dan semua sifat perlu sama? Sudah tentu kita tidak semestinya memerlukan kesan ini. Tetapi kita perlu mempunyai kesan sedemikian: semua kanak-kanak tersembunyi, muncul apabila terdapat tindak balas tetikus dan terapung di atas semua kandungan. Kita perlu tahu bahawa ini memang sakit kepala, kerana seperti yang kita lihat di atas, anak-anak ditekan di bawah label ibu bapa seterusnya apabila dipaparkan. Mari kita laksanakan kesan kedudukan tindak balas tetikus ini:

<ul>   
<li><a href="" title=""><span>第一块</span></a></li>   
<li><a href="" title=""><span>第二块</span></a></li>   
<li><a href="" title=""><span>第三块</span></a></li>   
<li><a href="" title=""><span>第四块</span></a></li>   
<li><a href="" title=""><span>第五块</span></a></li>   
</ul>

Kami menggunakan acara tetikus terpaut untuk melengkapkan paparan dan kesan sembunyi:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}   
li a:hover {background:#000000;}   
li span {display:none;}   
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

Kami menetapkan sebagai kedudukan :relative; Dengan cara ini, anak-anaknya akan diletakkan berdasarkan sudut kiri atas ibu bapa sebagai asal koordinat. Kemudian kami menetapkan bentuk khusus dan sifat kedudukan rentang, dan kemudian menyembunyikannya. Kami kemudian menggunakan pseudo-class:hover A untuk mengaktifkan span. Jika kita melihat hasilnya, kita akan melihat bahawa semua yang sepatutnya berada di atas kini berada di bawah. Jadi bagaimana kita menyelesaikan masalah ini? Sebenarnya, adalah mustahil untuk memaksa penembusan dengan CSS, jadi kita memikirkannya, bolehkah kita menjadikan tag induk yang belum dicetuskan tidak mempunyai atribut position:relative, tetapi hanya apabila; ia dicetuskan? Berikan nilai sedemikian kepada ibu bapa ini? Sebenarnya, memikirkan perkara ini pada asasnya boleh menyelesaikan semua masalah:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {display:block; height:100px; width:100px; background:#000;}   
li a:hover {position:relative; z-index:1; }   
li span {display:none;}   
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

Kita hanya perlu menetapkan atribut a:hover ke position:relative;, supaya hanya apabila tetikus dicetuskan, A akan diberikan atribut yang agak berkedudukan. Dengan cara ini, rasa malu disekat oleh tag induk lain dapat diselesaikan.

Sudah tentu, jika anda tidak keberatan pelayar seperti IE5, kami juga boleh memudahkan kod:

<ul>   
<li><span>第一块</span></li>   
<li><span>第二块</span></li>   
<li><span>第三块</span></li>   
<li><span>第四块</span></li>   
<li><span>第五块</span></li>   
</ul>

CSS boleh ditukar kepada ini:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}   
li:hover {position:relative; z-index:1;}   
li span {display:none;}   
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

Tambahan:
Artikel "Position: relative/absolute cannot break through the level" yang diterbitkan suatu ketika dahulu bercakap tentang tahap dalam positioning Apabila saya membacanya semula dalam beberapa hari yang lalu, saya mendapati bahawa artikel itu tidak menyeluruh dan tidak menunjuk kepada perkara utama. Oleh itu, saya ingin membuat suplemen khas di sini dengan harapan tahap-tahap dalam kedudukan dapat dijelaskan dengan lebih jelas dan jelas.

Kita semua tahu bahawa kedudukan mempunyai empat nilai yang berbeza, iaitu: statik mutlak |. Ini dijelaskan dalam "Manual Cina CSS2" Su Yu: statik: tiada kedudukan khas, objek mengikut peraturan kedudukan HTML mutlak: seret objek keluar dari aliran dokumen, gunakan kiri, kanan, atas, bawah dan atribut lain untuk membuat mutlak; kedudukan. Dan latanya ditakrifkan melalui atribut indeks-z. Pada masa ini, objek tidak mempunyai jidar, tetapi masih terdapat padding dan sempadan relatif: objek tidak boleh disusun, tetapi akan diimbangi dalam aliran dokumen biasa berdasarkan atribut seperti kiri, kanan, atas, bawah, dll. .; tetap: IE5.5 dan NS6 belum tersedia Sifat ini tidak disokong.

Tetapi untuk menukar kedudukan susun objek, anda memerlukan sifat CSS yang lain: z-index. Tetapi indeks-z ini tidak maha kuasa Ia dihadkan oleh tahap kod HTML. Z-index hanya boleh mencerminkan kesannya pada HTML pada tahap yang sama. Apa yang perlu dinyatakan di sini ialah indeks-z hanya boleh digunakan apabila nilai kedudukan objek adalah relatif/mutlak. Di bawah ini kami akan memberikan beberapa contoh untuk menerangkan ciri-ciri tahap:

<p id="box_1">   
<p id="a">这是第一个块</p>   
<p id="b">这是第二个块</p>   
</p>

Untuk kod HTML di atas, kita juga perlu menulis CSS untuk mentakrifkannya:

#a,#b {position:absolute; width:300px; height:100px; }   
#a {z-index:10; left:0; top:0; background:#000; }   
#b {z-index:1; left:20px; top:20px; background:#c00; }

Ini ialah yang paling biasa Dalam kes ini, tahap tindanan #a dan #b boleh ditetapkan melalui indeks-z. Ini tidak ditanya, jadi dalam keadaan apa masalah akan berlaku? Mari lihat contoh lain:

<p id="box_1">   
<p id="a">这是第一个块</p>   
</p>   
<p id="box_2">   
<p id="b">这是第二个块</p>   
</p>

Tulis CSS lain berdasarkan struktur ini Beri perhatian kepada perbezaan dalam CSS ini:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; z-index:100; }   
#b {background:#0c0; z-index:1; left:50px;}

这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#box_1 {z-index:100;}   
#box_2 {z-index:1;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; }   
#b {background:#0c0; left:50px;}