Kedudukan Mutlak lwn Relatif: Mengapa Mereka Berkelakuan Sangat Berbeza?

Memahami Kedudukan Mutlak lwn. Relatif: Lebar, Tinggi dan Lagi

Apabila berurusan dengan elemen penentududukan pada halaman web, fahami konsep kedudukan mutlak vs relatif adalah penting. Mari kita mendalami empat perkara penting yang sering menimbulkan persoalan:

1. Relatif vs. Lebar Mutlak

Mengapakah div berkedudukan agak mengambil lebar 100% secara automatik, manakala div berkedudukan mutlak hanya mengambil lebar kandungan?

Sebabnya ialah kedudukan tetapan :mutlak mengalih keluar elemen daripada aliran biasa struktur dokumen. Tanpa mentakrifkan lebar secara eksplisit, penyemak imbas tidak dapat menentukan lebar div yang diposisikan secara mutlak. Untuk mencapai 100% lebar, tetapkan lebar secara eksplisit:100%.

2. Ketinggian dan Kedudukan Relatif

Mengapakah penetapan ketinggian kepada 100% tidak mempunyai kesan pada div yang agak kedudukannya, tetapi div yang diposisikan secara mutlak mengambil ketinggian 100%?

Elemen dengan kedudukan :relative berkelakuan serupa dengan elemen dengan kedudukan:statik dari segi ketinggiannya. Oleh itu, menetapkan ketinggian:100% tidak akan memberi kesan melainkan elemen induk mempunyai ketinggian yang ditentukan. Sebaliknya, elemen yang diposisikan secara mutlak dialih keluar daripada aliran dokumen dan melaraskan ketinggiannya berdasarkan ketinggian elemen yang mengandunginya.

3. Margin-Top dan Shifting

Mengapa margin-top:30px mengalihkan div yang diposisikan secara mutlak, tetapi hanya div yang agak berkedudukan berubah apabila top:30px digunakan?

Ini berkemungkinan besar berkaitan dengan elemen induk dalam struktur HTML anda. Tanpa memberikan kod HTML dan CSS penuh, sukar untuk menentukan punca sebenar.

4. Kedudukan Mutlak tanpa Atas dan Kiri

Jika anda tidak menyatakan top:0 dan left:0 untuk div yang berkedudukan mutlak, mengapakah ia mengambil ruang di atas div sebelumnya?

Tetapan lalai untuk sifat atas dan kiri adalah automatik. Ini bermakna penyemak imbas secara automatik mengira nilai ini berdasarkan di mana elemen itu akan berada jika ia tidak mempunyai position:absolute. Akibatnya, div yang diposisikan secara mutlak akan muncul di atas div sebelumnya tanpa mentakrifkan kedudukannya dengan jelas.

Atas ialah kandungan terperinci Kedudukan Mutlak lwn Relatif: Mengapa Mereka Berkelakuan Sangat Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!