Mengapakah elemen yang diposisikan secara mutlak mewarisi kedudukannya daripada induk kedudukan mutlaknya yang paling hampir, bukan nenek moyang langsungnya?

Kedudukan Mutlak Bersarang dalam Kedudukan Mutlak

Dalam dokumen web, elemen boleh diletakkan menggunakan sifat kedudukan CSS. Apabila ditetapkan kepada relatif, elemen diletakkan secara relatif kepada kedudukan normalnya, manakala kedudukan mutlak elemen secara mutlak relatif kepada nenek moyang kedudukan terdekatnya.

Dalam senario yang disediakan, terdapat tiga elemen div:

<code class="html"><div id="1st">
  <div id="2nd">
    <div id="3rd"></div>
  </div>
</div></code>

• #1 mempunyai kedudukan: relatif.
• #2 berada pada kedudukan mutlak berbanding #1.
• #3 berada pada kedudukan mutlak berbanding #2.

Timbul persoalan: kenapa kedudukan #3 mutlak berbanding #2 dan bukannya nenek moyang langsung #1?

Jawapannya terletak pada tingkah laku kedudukan mutlak. Apabila elemen diletakkan secara mutlak, ia menetapkan semula kedudukan anak-anaknya. Dalam kes ini, #2nd diposisikan secara mutlak berbanding #1, jadi mana-mana anak #2 (termasuk #3) diposisikan secara mutlak berbanding #2. Tingkah laku ini disengajakan dan tidak boleh dipintas.

Untuk mencapai kedudukan mutlak berbanding div paling luar (#1), #3 mesti dijadikan anak langsung #1:

<code class="html"><div id="1st">
  <div id="3rd"></div>
</div></code>

Susunan ini memastikan kedudukan ke-3 secara mutlak berbanding nenek moyang kedudukannya yang terdekat, iaitu ke-1.

Atas ialah kandungan terperinci Mengapakah elemen yang diposisikan secara mutlak mewarisi kedudukannya daripada induk kedudukan mutlaknya yang paling hampir, bukan nenek moyang langsungnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!