Mengapa Elemen-elemen Saya Diposisikan Benar-Benar Bersusun Menegak Daripada Secara Mendatar?

Elemen Mutlak Susun Menegak Daripada Mendatar

Dalam CSS, elemen penentududukan dengan kedudukan mutlak boleh membawa kepada gelagat susun yang tidak dijangka. Untuk memahami sebab elemen mutlak disusun di atas satu sama lain dan bukannya sebelah menyebelah, mari kita mendalami asas penentududukan CSS.

Kedudukan Relatif vs. Mutlak

Apabila elemen diletakkan dengan kedudukan: relatif, ia mengekalkan kedudukannya dalam aliran dokumen biasa, tetapi boleh dianjak menggunakan atas, kanan, bawah atau kiri harta benda. Elemen dengan kedudukan relatif tidak menjejaskan reka letak elemen sekeliling.

Sebaliknya, elemen dengan kedudukan: mutlak dialih keluar daripada aliran dokumen dan menjadi kedudukan relatif kepada elemen yang mengandunginya atau nenek moyang kedudukan terdekat. Elemen mutlak menduduki ruang mereka sendiri dan tidak lagi berinteraksi dengan elemen lain dalam aliran.

Dalam Contoh Anda

Dalam kod anda, kedua-dua #row1 dan #row2 mempunyai mutlak kedudukan, menjadikannya bebas daripada aliran dokumen. Memandangkan kedua-dua elemen ini adalah anak kepada .bekas yang berkedudukan mutlak, ia diposisikan secara relatifnya. Memandangkan #row1 diletakkan sebelum #row2, ia muncul di atasnya.

Menyelesaikan Isu

Untuk memaparkan #row1 dan #row2 secara menegak, anda perlu mengalih keluar kedudukan mutlak daripada unsur-unsur ini dan gunakannya pada unsur yang mengandunginya, .bekas. Ini membolehkan baris berkelakuan seperti elemen blok biasa, menyusun secara menegak satu di bawah yang lain.

.container {
  position: absolute;
}

.row {
  position: static;
}

Memahami Kedudukan CSS

Untuk menjelaskan lebih lanjut, mari kita terokai yang berbeza Nilai kedudukan CSS:

• statik: Elemen kekal dalam aliran dokumen biasa.
• relatif: Elemen mengekalkan kedudukannya dalam aliran tetapi boleh dialihkan menggunakan sifat atas, kanan, bawah atau kiri.
• mutlak: Elemen dialih keluar daripada aliran dan diletakkan secara relatif kepada elemen yang mengandunginya atau kedudukan terdekat nenek moyang.
• ditetapkan: Elemen dialih keluar daripada aliran dan diletakkan secara relatif kepada port pandangan.

Dengan memahami cara penentududukan CSS berfungsi, anda boleh mengawal dengan berkesan susun atur dan susun elemen pada halaman web anda.

Atas ialah kandungan terperinci Mengapa Elemen-elemen Saya Diposisikan Benar-Benar Bersusun Menegak Daripada Secara Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!