Mengapa Elemen Diposisikan Benar-Benar Saya Lalai ke Kiri Atas Halaman?

Kedudukan Mutlak dalam Helaian Gaya Lata (CSS)

Dalam CSS, kedudukan mutlak membolehkan anda mengalihkan elemen dalam bekas induk menggunakan piksel tertentu atau nilai peratusan. Walau bagaimanapun, menghadapi masalah dengan kedudukan mutlak boleh mengecewakan. Mari kita mendalami masalah biasa dengan kedudukan mutlak dan penyelesaiannya yang sepadan.

Masalah:

Dalam percubaan untuk meletakkan elemen dalam kedudukan mutlak berbanding induknya, elemen itu peletakan gagal, dan ia lalai ke penjuru kiri sebelah atas halaman.

Kod Contoh:

<div>
<p><strong>Penyelesaian:</strong></p>
<p>Sebab kegagalan kedudukan terletak pada bekas induk bukan elemen yang diposisikan. Elemen dengan kedudukan mutlak diletakkan daripada offsetParent mereka, nenek moyang terdekat yang turut diletakkan. Dalam kod yang disediakan, tiada satu pun nenek moyang diposisikan, menyebabkan elemen anak diimbangi daripada elemen badan, iaitu induk offsetnya.</p>
<p>Penyelesaian melibatkan penggunaan kedudukan sifat CSS: relatif kepada div induk . Ini memaksa elemen induk menjadi elemen diposisikan, menjadikannya offsetParent untuk anaknya.</p>
<p><strong>Sampel Kod Dibetulkan:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>Dengan menetapkan induk "padding -kiri: 20px;" dan kedudukan: relatif, kami mewujudkan titik rujukan diposisikan dalam induk, memastikan kedudukan mutlak elemen anak yang tepat dalam induknya.</p></div>