Bagaimanakah Kedudukan Mutlak Berfungsi Apabila Bersarang Dalam Elemen Lain yang Diposisikan Benar?

Kedudukan Mutlak dalam Kedudukan Mutlak

Apabila bekerja dengan reka letak halaman web, adalah perkara biasa untuk menggunakan teknik penentududukan seperti penentududukan mutlak untuk menyusun elemen dengan tepat dalam halaman. Walau bagaimanapun, isu yang berpotensi timbul apabila anda cuba menggunakan kedudukan mutlak dalam elemen yang dengan sendirinya diposisikan secara mutlak.

Andaikan anda mempunyai elemen kontena (div pertama) dengan kedudukan relatif (kedudukan:relatif), yang membolehkan anda untuk meletakkan elemen kanak-kanak berbanding dengan kedudukannya sendiri. Dalam bekas ini, anda mempunyai elemen kedudukan mutlak (div ke-2) dan elemen kedudukan mutlak ketiga (div ke-3) bersarang dalam div ke-2.

Dalam senario ini, anda mungkin menjangkakan div ke-3 diposisikan secara mutlak berbanding dengan div pertama, walaupun div ke-2 juga diposisikan secara mutlak. Walau bagaimanapun, ini tidak berlaku.

Memahami Hierarki Kedudukan

Sebab bagi tingkah laku ini terletak pada cara kedudukan mutlak berfungsi. Apabila sesuatu elemen diberi kedudukan mutlak, ia dialih keluar daripada aliran biasa dokumen dan sebaliknya diletakkan secara relatif kepada nenek moyang kedudukan terdekatnya. Dalam kes ini, div ke-2 ialah nenek moyang kedudukan terdekat bagi div ke-3, tidak kira sama ada div pertama juga mempunyai kedudukan relatif.

Ini bermakna kedudukan mutlak div ke-3 dikira secara relatif kepada div ke-2 kedudukan div, bukan kedudukan div pertama. Akibatnya, div ke-3 akan muncul sepenuhnya dalam kedudukan div ke-2, bukan div pertama.

Teknik Kedudukan Ganti

Jika anda mahu div ke-3 menjadi benar-benar diposisikan berbanding dengan div pertama, anda perlu menjadikannya anak langsung div pertama. Ini akan membolehkan div ke-3 mewarisi kedudukan mutlak div pertama dan diletakkan dengan sewajarnya.

Adalah penting untuk ambil perhatian bahawa kedudukan: mutlak menetapkan semula kedudukan relatif untuk kanak-kanak sama seperti kedudukan: relatif. Oleh itu, jika anda mempunyai berbilang elemen anak yang diposisikan mutlak dalam unsur induk yang agak berkedudukan, kedudukannya akan dikira secara bebas, berbanding dengan nenek moyang kedudukan mutlak terdekat mereka.

Atas ialah kandungan terperinci Bagaimanakah Kedudukan Mutlak Berfungsi Apabila Bersarang Dalam Elemen Lain yang Diposisikan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!