Mengapa Kedudukan Mutlak Mewarisi Daripada Induk Terdekat dalam Div Bersarang?

Anomali Kedudukan Mutlak Mutlak

Dalam susun atur berbilang lapisan yang melibatkan kedudukan mutlak, adalah perkara biasa untuk menghadapi senario di mana div dalam mempunyai mutlak kedudukan relatif kepada induk terdekatnya, yang juga diposisikan secara mutlak dalam div lain. Walau bagaimanapun, dalam persediaan sedemikian, inner div mewarisi kedudukan mutlaknya daripada induk terdekatnya, yang membawa kepada tingkah laku yang kelihatan tidak dijangka.

Pertimbangkan struktur HTML berikut:

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

Secara intuitif, satu akan menjangkakan kedudukan #3 adalah relatif mutlak kepada #1, kerana #2 berada pada kedudukan mutlak dalam #1. Walau bagaimanapun, realitinya ialah kedudukan mutlak #3 diwarisi daripada #2. Ini kerana position: absolute on #2nd menetapkan semula kedudukannya secara relatif kepada induknya, yang membawa kepada #3rd menjadi mutlak dalam #2nd.

Tingkah laku ini boleh dikaitkan dengan peraturan kekhususan CSS. Apabila elemen anak mempunyai kedudukan mutlak, kedudukannya ditentukan oleh kotak sempadan induk terdekatnya. Dalam kes ini, kedudukan #3 ditakrifkan oleh kotak sempadan #2 dan ia tidak mengetahui kedudukan mutlak #2 berbanding #1.

Untuk menyelesaikan isu ini dan mempunyai kedudukan mutlak #3 relatif hingga ke #1, perlu menjadikan #3 sebagai anak langsung #1. Dalam erti kata lain, HTML berikut akan menghasilkan tingkah laku yang diingini:

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

Dalam kes ini, kedudukan mutlak #3 ditentukan oleh kedudukan induknya, #1, iaitu apa yang dijangkakan. Adalah penting untuk ambil perhatian bahawa menetapkan semula kedudukan unsur induk melalui kedudukan: mutlak juga mempengaruhi kedudukan anak-anaknya, melainkan ia diposisikan secara mutlak berbanding dengan unsur induk yang berbeza.

Atas ialah kandungan terperinci Mengapa Kedudukan Mutlak Mewarisi Daripada Induk Terdekat dalam Div Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!