Kedudukan Relatif lwn. Mutlak dalam CSS: Apakah Perbezaannya?

Memahami Kedudukan: Relatif vs Mutlak dalam CSS

Kedudukan CSS membolehkan anda menentukan lokasi elemen pada halaman web. Kedudukan: relatif dan kedudukan: mutlak ialah dua pilihan kedudukan yang biasa digunakan, tetapi ia berbeza dalam tingkah laku dan tujuannya.

Kedudukan: Mutlak

Apabila anda menetapkan kedudukan: mutlak , elemen dialih keluar daripada aliran biasa dokumen dan diletakkan di lokasi yang tepat pada halaman. Empat sifat kedudukan (atas, kanan, bawah, kiri) digunakan sebagai offset untuk menentukan kedudukan elemen berbanding dengan port pandangan penyemak imbas atau bekas induknya (jika ia mempunyai satu dengan kedudukan yang diganti).

Bila hendak menggunakan kedudukan: mutlak:

• Untuk meletakkan elemen dengan tepat pada lokasi tertentu pada halaman, bebas daripada kedudukannya dalam aliran.
• Untuk mencipta elemen terapung yang boleh bertindih dengan kandungan halaman lain.

Kedudukan: Relatif

Dengan kedudukan: relatif, elemen kekal dalam aliran biasa dokumen, tetapi kedudukannya dilaraskan berbanding dengan lokasi asalnya. Sifat kedudukan berfungsi sama seperti untuk kedudukan mutlak, tetapi ia mengimbangi kedudukan elemen daripada lokasi semasa dalam aliran.

Bila menggunakan kedudukan: relatif:

• Untuk mengalihkan kedudukan elemen tanpa mengalihkannya daripada aliran dokumen.
• Untuk mencipta menu lungsur turun atau elemen lain yang memaparkan relatif kepada elemen induknya.

Perbezaan Utama:

• Kedudukan mutlak mengalih keluar elemen daripada aliran biasa, manakala kedudukan relatif mengekalkannya dalam aliran .
• Kedudukan mutlak menentukan kedudukan elemen berbanding dengan ruang pandang atau bekas induk, manakala kedudukan relatif mengalihkannya daripada kedudukan semasa dalam aliran.
• Elemen dengan kedudukan mutlak mempunyai lebar lalai berdasarkan kandungannya, manakala elemen yang agak kedudukannya mempunyai lebar lalai 100%.

Atas ialah kandungan terperinci Kedudukan Relatif lwn. Mutlak dalam CSS: Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!