Mengapa Elemen yang Diposisikan Secara Mutlak Kadang-kadang Nampak Tidak Sejajar?

Memahami Kedudukan Lalai untuk Elemen Diletakkan Benar-Benar

Apabila menggunakan kedudukan: harta mutlak, adalah perkara biasa untuk menghadapi masalah dengan elemen yang tidak sejajar. Ini berlaku apabila nilai lalai untuk sifat ini tidak seperti yang dijangkakan.

Dalam HTML, elemen yang diletakkan secara mutlak tanpa menjejaskan kandungan sekeliling. Walau bagaimanapun, secara lalai, nilai untuk atas, kiri, bawah dan kanan tidak ditetapkan kepada 0.

Nilai Lalai

Sebaliknya, nilai lalai untuk semua sifat ini ialah automatik. Ini bermakna kedudukan elemen dikira berdasarkan blok yang mengandunginya, iaitu elemen nenek moyang terdekat dengan kedudukan bukan statik.

Apabila ketiga-tiga sifat (kiri, lebar dan kanan) ditetapkan kepada auto, kedudukan elemen ditentukan secara relatif kepada kedudukan statik, iaitu, kedudukan asalnya jika ia tidak diletakkan secara mutlak.

Mengikut spesifikasi CSS (bahagian 10.3.7):

Jika ketiga-tiganya daripada 'kiri', 'lebar' dan 'kanan' ialah 'auto': Mula-mula tetapkan sebarang nilai 'auto' untuk 'margin-kiri' dan 'margin-kanan' kepada 0. Kemudian, jika sifat 'arah' bagi elemen yang mewujudkan blok yang mengandungi kedudukan statik ialah 'ltr' tetapkan 'kiri' ke kedudukan statik dan gunakan peraturan nombor tiga di bawah; jika tidak, tetapkan 'kanan' pada kedudukan statik dan gunakan peraturan nombor satu di bawah.

Begitu juga, untuk dimensi menegak, sifat (atas, tinggi dan bawah) dikira seperti berikut (bahagian 10.6.4):

Jika ketiga-tiga 'atas', 'tinggi' dan 'bawah' adalah automatik, tetapkan 'atas' kepada kedudukan statik dan gunakan peraturan nombor tiga di bawah.

Dalam istilah yang lebih mudah, kedudukan lalai ialah kedudukan asal elemen dalam reka letak, walaupun ia berada pada kedudukan mutlak.

Atas ialah kandungan terperinci Mengapa Elemen yang Diposisikan Secara Mutlak Kadang-kadang Nampak Tidak Sejajar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!