Kedudukan Mutlak lwn. Relatif: Bagaimanakah Dimensi dan Peletakan Mereka Berbeza?

Kedudukan Mutlak vs Relatif: Menyelidiki Dimensi dan Peletakan

Dalam reka bentuk web, memahami konsep kedudukan mutlak dan relatif adalah penting. Walaupun kedua-dua teknik membenarkan peletakan elemen yang tepat, ia mempamerkan gelagat yang berbeza dari segi lebar, ketinggian dan kedudukan.

1. Perbezaan Lebar

Elemen dengan position:relative secara automatik mengambil 100% daripada lebar bekasnya, mengalir dengan berkesan dengan kandungan dokumen. Sebaliknya, elemen dengan position:absolute berkelakuan berbeza, hanya menduduki lebar kandungannya sendiri. Ini adalah akibat daripada ia dialih keluar daripada aliran biasa dokumen. Untuk mencapai kesan lebar penuh untuk elemen kedudukan mutlak, anda mesti menetapkan lebarnya secara eksplisit kepada 100%.

2. Pertimbangan Ketinggian

Apabila anda menetapkan ketinggian:100% kepada elemen dengan position:relative, ia tidak mempunyai kesan melainkan bekasnya mempunyai ketinggian yang ditentukan. Ini kerana ia mematuhi aliran normal kandungan. Sebaliknya, elemen kedudukan mutlak tidak dikekang oleh bekasnya, jadi menetapkan ketinggiannya kepada 100% akan menyebabkan mereka memperoleh ketinggian penuh bekasnya.

3. Kesan Margin dan Padding

Margin dan padding mempunyai kesan yang berbeza pada elemen kedudukan mutlak dan relatif. Sebagai contoh, jika anda menggunakan margin-top:30px pada elemen kedudukan mutlak, ia akan mengalihkan elemen ke bawah. Walau bagaimanapun, jika anda menggunakan top:30px, ia akan menjejaskan elemen kedudukan relatif sebaliknya. Tingkah laku ini berpunca daripada cara berbeza elemen ini diletakkan dalam aliran dokumen.

4. Kedudukan Atas dan Kiri Lalai

Apabila tiada sifat atas atau kiri eksplisit ditentukan untuk elemen kedudukan mutlak, ia lalai kepada nilai auto. Penyemak imbas mengira kedudukan ini berdasarkan tempat elemen akan muncul dalam aliran kandungan biasa. Dengan menetapkan sifat atas dan kiri kepada 0, anda boleh memastikan bahawa elemen kedudukan mutlak diletakkan di penjuru kiri sebelah atas elemen yang mengandunginya.

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