Bagaimanakah Kedudukan Statik dan Relatif Berbeza dalam CSS?

Kedudukan Statik vs. Relatif dalam CSS

Dalam CSS, memahami perbezaan antara kedudukan statik dan relatif adalah penting untuk memanipulasi susun atur elemen pada halaman web.

Kedudukan Statik (Lalai)

Elemen dengan kedudukan statik berkelakuan seperti yang diharapkan. Ia diberikan sebaris dalam elemen induk mengikut aliran HTML. Mereka tidak bertindak balas kepada peraturan kedudukan seperti kiri, atas, kanan atau bawah.

Kedudukan Relatif

Kedudukan relatif membolehkan elemen dialihkan berbanding kedudukan lalainya dalam aliran HTML. Dengan menentukan offset (cth., kiri: 50px), kedudukan elemen dianjakkan berbanding peletakan lalainya. Tidak seperti penentududukan statik, elemen dengan kedudukan relatif masih mengikut aliran HTML.

Kesan Peraturan Penentududukan

Pendudukan relatif memberikan fleksibiliti dalam elemen penentududukan. Walau bagaimanapun, jenis penentududukan lain juga wujud:

• Penedudukan Mutlak: Elemen dialih keluar daripada aliran HTML dan diletakkan secara tepat berbanding dengan elemen yang mengandungi atau nenek moyang kedudukan relatif seterusnya di atas. pokok elemen.
• Kedudukan Tetap: Elemen dialih keluar daripada aliran HTML dan ditetapkan pada kedudukan tertentu dalam port pandangan, tanpa mengira menatal.

Memahami Perbezaan

Jadual ringkasan berikut menyerlahkan perbezaan utama antara kedudukan statik dan relatif:

Feature	Static	Relative
Default Behavior	Elements flow inline	Position relative to default
Position Rules	Ignored	Respected
Removed from HTML Flow	No	No

Atas ialah kandungan terperinci Bagaimanakah Kedudukan Statik dan Relatif Berbeza dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!