Perbezaan antara kedudukan statik dan kedudukan relatif

Question

Dalam CSS, apakah perbezaan antara kedudukan statik (lalai) dan kedudukan relatif?

P粉649990273 · Answer

Untuk jawapan kepada "Mengapa CSS masih melaksanakan position:static;", dalam sesetengah kes menggunakan position:relative untuk elemen induk dan position:absolute untuk elemen anak akan mengehadkan lebar penskalaan elemen anak. Dalam sistem menu mendatar, anda mungkin telah memautkan 'lajur', yang menggunakan width:auto tidak akan berfungsi dengan elemen induk relatif. Dalam kes ini, menukarnya kepada 'statik' akan membolehkan lebar berubah berdasarkan kandungan di dalamnya.

Saya menghabiskan masa berjam-jam bergelut dengan sebab bekas itu tidak boleh diubah saiznya berdasarkan kandungannya. Harap ini membantu!

P粉122932466 · Answer

Kedudukan statik ialah model kedudukan lalai untuk elemen. Ia dipaparkan pada halaman sebagai sebahagian daripada aliran HTML biasa. Elemen kedudukan statik tidak mematuhi peraturan left、top、right和bottom:

Kedudukan relatif membolehkan anda menentukan offset khusus berbanding kedudukan normal elemen dalam aliran HTML (seperti dalam left、top等）。因此，如果我在一个div中有一个文本框，我可以在文本框上应用相对定位，以便它显示在相对于它在divKedudukan khusus di mana ia biasanya akan diletakkan:

Terdapat juga kedudukan mutlak - anda boleh menentukan kedudukan tepat sesuatu elemen berbanding keseluruhan dokumen, atau relatif kepada elemen kedudukan relatif seterusnya lebih tinggi dalam pepohon elemen:

Apabila position: relative digunakan pada elemen induk dalam hierarki:

Sila ambil perhatian bahawa elemen kedudukan mutlak kami adalah tertakluk kepada batasan elemen kedudukan yang agak.

Akhirnya ada kedudukan tetap. Kedudukan tetap mengekang elemen ke lokasi tertentu dalam port pandangan yang kekal tidak berubah semasa menatal:

Anda juga boleh memerhatikan bahawa elemen kedudukan tetap tidak menyebabkan penatalan kerana ia tidak dianggap sebagai elemen sempadan kawasan pandang: