kedudukan:relatif/mutlakTahap yang tidak boleh dipecahkan_Pertukaran pengalaman-tutorial css-php.cn

Nota: Contoh dalam artikel ini mungkin tidak dipaparkan di bawah IE5.x Sila gunakan IE6, IE7, Firefox, Opera dan pelayar lain untuk nyahpepijat!
Beberapa ketika dahulu, saya masih ingat seseorang bertanya soalan dalam kumpulan yang semua orang benar-benar tidak faham:

Salin kod Kodnya adalah seperti berikut:

Blok pertama
 blok ketiga 
Blok keempat
 Tidak kira berapa tinggi ia ditetapkan, ia akan sentiasa berada di bawah induk di belakangnya. 

Salin kod

Kod adalah seperti berikut:

*{margin:0; ; senarai- gaya: tiada;} li {lebar:100px; >li span {lebar:200px; tinggi:200px; kedudukan: mutlak:0; >

Blok pertama

Blok kedua<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">Blok ketiga<title>
</title>Blok keempat<style type="text/css">  
 /*<![CDATA[*/  
  *{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:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}   
 /*]]>*/  
 </style>
Blok kelima
<ul>
<li>
</li>
<li>
<span></span> </li> <li>[Ctrl+A Pilih semua Nota: </li>Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakannya <li>]</li> Petua: Anda boleh mengubah suai sebahagian daripada kod dahulu Jalankan <li> sekali lagi dan mencubanya Mudah untuk mengetahui bahawa anak-anak kita mempunyai nilai indeks-z 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. </li>Mungkin anda memikirkannya dengan cara 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 sedar kesan kedudukan tindak balas tetikus ini: </ul>

Salin kod Kod adalah seperti berikut:

Blok pertama ;Blok ketiga

Blok keempat

< Blok kelima

> Kodnya adalah seperti berikut:

*{margin:0; list- style:none;}

li {height:100px; :left; width:100px;}
li a {posisi:z-index:1; latar belakang:#000000;}
li span {display:none;}

li a:hover span {display: block; ; kiri:100px; z-index:1000;

Sekeping pertama

Kepingan kedua<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title></title>Blok ketiga<style type="text/css">  
 /*<![CDATA[*/  
*{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; }   
 /*]]>*/  
 </style>
<ul>
<li>
<a href="" title="">Blok keempat<span></span></a>
</li>
<li>
<a href="" title="">Blok kelima<span></span></a>
</li>
<li>
<a href="" title="">
<span></span></a> </li> <li>[Ctrl+A Pilih semua Nota: <a href="" title="">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakannya <span>]</span> Petua: Anda boleh mengubah suai sebahagian kod dahulu Apabila kami menjalankan </a> sekali lagi, kami menetapkan kepada position:relative supaya anak-anaknya akan diletakkan berdasarkan sudut kiri atas induk 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? Malah, memikirkan perkara ini pada asasnya boleh menyelesaikan semua masalah: </li>
<li><a href="" title=""><span></span>Salin kod</a></li>
</ul> Kodnya adalah seperti berikut:<div class="codebody" id="code19585">
<br>*{margin:0; padding:0; list-style:none;} <br>li {height:100px; > li a {paparan: blok; tinggi: 100px; lebar: 100px; ;} <br>li a: hover span {paparan:blok; tinggi:200px; <br><br><br><br>
</div>
<br>
<div class="htmlarea">
 <textarea id="runcode92067">
 
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>
</title>
<style type="text/css">  
 /*<![CDATA[*/  
*{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; }   
 /*]]>*/  
 </style>Sekeping pertama<ul>
<li>
<a href="" title="">
<span></span></a>Kepingan kedua</li>
<li>
<a href="" title="">
<span></span></a>Blok ketiga</li>
<li>
<a href="" title="">
<span></span></a>Blok keempat</li>
<li>
<a href="" title="">
<span></span></a>Blok kelima</li>
<li>
<a href="" title="">
<span>
</span>
</a>
</li>
</ul>

[Ctrl+A Pilih semua Nota:
Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakannya ] Petua: Anda boleh mengubah suai sebahagian kod dahulu Apabila kami menjalankan sekali lagi, kami hanya perlu menetapkan atribut a:hover kepada position:relative;, supaya A akan diberikan atribut kedudukan relatif hanya apabila tetikus dicetuskan. Ini menyelesaikan masalah disekat oleh teg induk lain. Sudah tentu, jika anda tidak keberatan pelayar seperti IE6 atau IE5 🎜> Kodnya adalah seperti berikut:

Blok pertama

Blok kelima

CSS boleh ditukar kepada ini:

 Kodnya adalah seperti berikut: 


* {margin:0; gaya senarai:tiada;} 
li {tinggi:100px; latar belakang:#000;} 
li :hover {kedudukan:relatif; z-index:1;} 
li span {display:none;} 

[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakannya ]