Ke mana Elemen yang Diposisikan Benar-Benar Apabila Tiada Offset Ditentukan?

Kedudukan: Penjajaran Lalai Mutlak

Apabila menggunakan kedudukan: mutlak, elemen diletakkan secara relatif kepada blok yang mengandunginya. Walau bagaimanapun, jika tiada offset khusus disediakan, nilai lalai akan digunakan.

Nampaknya, nilai lalai untuk kedudukan: mutlak bukan atas: 0; kiri: 0, sebaliknya automatik. Menurut spesifikasi CSS, apabila ketiga-tiga offset (atas, lebar dan kanan) ditetapkan kepada automatik, elemen itu kekal dalam "kedudukan statik."

Kedudukan Statik

Kedudukan statik merujuk kepada kedudukan semula jadi elemen dalam reka letak seolah-olah ia tidak diletakkan secara mutlak. Untuk elemen yang diposisikan secara mutlak, blok yang mengandungi menentukan lebar kedudukan statik.

Penjajaran Mendatar

Apabila kiri, lebar dan kanan semuanya ditetapkan kepada automatik, lebar elemen ialah "mengecut-untuk-sesuai." Ini bermakna ia mengambil lebar yang diperlukan untuk menampung kandungannya. Offset kiri kemudiannya dikira untuk memastikan bahawa elemen diletakkan dengan betul dalam blok yang mengandungi.

Penjajaran Menegak

Begitu juga, apabila atas, ketinggian dan bawah ditetapkan kepada auto, ketinggian elemen adalah berdasarkan kandungannya. Offset teratas kemudiannya dikira untuk memastikan kedudukan yang betul dalam blok yang mengandungi.

Contoh

Dalam kod HTML yang disediakan, elemen h1 diletakkan secara mutlak tanpa sebarang offset yang jelas :

h1 {
  position: absolute;
}

Secara lalai, elemen h1 akan kekal dalam kedudukan statiknya, iaitu di bahagian atas blok yang mengandungi. Memandangkan blok yang mengandungi dalam kes ini ialah

, elemen h1 diletakkan di bahagian atas halaman dan sejajar dengan jidar kiri.

Kesimpulan

Apabila menggunakan kedudukan: mutlak tanpa offset yang ditentukan, kedudukan lalai elemen ditentukan oleh blok yang mengandunginya dan kandungannya, memastikan penjajaran yang betul dalam reka letak.

Atas ialah kandungan terperinci Ke mana Elemen yang Diposisikan Benar-Benar Apabila Tiada Offset Ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!