Bagaimana untuk Mencegah Elemen Mutlak daripada Bertindih dalam CSS?

Pertindihan Menegak Elemen Mutlak: Penyelesaian

Dalam kod HTML anda, anda telah menentukan dua baris, #row1 dan #row2, dengan kedudukan mutlak. Isu ini timbul kerana elemen mutlak dialih keluar daripada aliran dokumen biasa dan disusun di atas satu sama lain, mengakibatkan kandungan bertindih.

Untuk menyelesaikannya, kita perlu memahami tujuan dan tingkah laku kedudukan mutlak. Dengan menetapkan elemen kepada kedudukan: mutlak;, kami mengalih keluarnya daripada aliran standard dan meletakkannya secara relatif kepada nenek moyang kedudukan terdekatnya.

Dalam contoh anda, .row dan .col1, .col2 ialah elemen mutlak yang bersarang dalam .bekas, yang juga mutlak. Walau bagaimanapun, memandangkan ketiga-tiga elemen adalah mutlak, semuanya menjadi bebas dan bertindih.

Untuk menyelesaikan isu ini, kita perlu mewujudkan hierarki kedudukan yang betul. Kita boleh mencapai ini dengan menetapkan .row kepada kedudukan relatif. Dengan cara ini, .col1 dan .col2 akan kekal mutlak, tetapi mereka akan diposisikan secara relatif kepada .row, yang berada dalam aliran dokumen.

Perubahan ini membolehkan #row1 dan #row2 disusun secara menegak, mengikut keadaan biasa tingkah laku elemen blok. Berikut ialah CSS yang diubah suai:

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

Pengubahsuaian ini mengekalkan sifat kedudukan yang anda perlukan sambil memastikan #row1 dan #row2 dipaparkan di bawah satu sama lain seperti yang diharapkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Elemen Mutlak daripada Bertindih dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!