Mengapakah Elemen yang Berkedudukan Mutlak Dalam Elemen yang Berkedudukan Relatif Mewarisi Kedudukannya daripada Induk Terdekatnya?

Kedudukan Mutlak Dalam Kedudukan Relatif: Mengapa Hierarki Penting

Dalam HTML, kedudukan elemen ditentukan oleh sifat kedudukan CSS. Apabila sesuatu elemen diberikan kedudukan mutlak, ia dialih keluar daripada aliran biasa dalam dokumen dan kedudukannya sebaliknya ditakrifkan secara relatif kepada nenek moyangnya yang terdekat dengan kedudukan: mutlak atau kedudukan: relatif.

Soalan:

Pertimbangkan struktur HTML berikut:

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

Jika div pertama mempunyai kedudukan: relatif, div kedua mempunyai kedudukan: mutlak, dan div ketiga juga mempunyai kedudukan: mutlak , mengapakah div ketiga diletakkan secara mutlak berbanding div kedua dan bukan div pertama?

Jawapan:

Kunci untuk memahami tingkah laku ini terletak pada cara mutlak penentududukan mempengaruhi kedudukan elemen kanak-kanak.

Apabila elemen diposisikan secara mutlak, mana-mana elemen kanak-kanak yang terkandung di dalamnya juga diposisikan secara mutlak relatif terhadapnya, walaupun elemen kanak-kanak tersebut mempunyai kedudukan mutlak mereka sendiri. Ini kerana kedudukan mutlak secara berkesan menetapkan semula kedudukan relatif lalai untuk elemen anak.

Dalam contoh kami, div ketiga diposisikan secara mutlak relatif kepada div kedua kerana div kedua mempunyai kedudukan: mutlak. Kedudukan mutlak div pertama (dengan kedudukan: relatif) tidak mempunyai kesan ke atas kedudukan div ketiga kerana ia bukan nenek moyang langsung div ketiga.

Untuk mencapai tingkah laku yang diingini untuk memiliki div ketiga div diposisikan secara mutlak berbanding div pertama, kita perlu mengalih keluar kedudukan mutlak daripada div kedua dan menjadikan div ketiga sebagai anak langsung div pertama:

<div id="1st">
  <div id="3rd"></div>
</div>

Atas ialah kandungan terperinci Mengapakah Elemen yang Berkedudukan Mutlak Dalam Elemen yang Berkedudukan Relatif Mewarisi Kedudukannya daripada Induk Terdekatnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!