Bagaimana untuk Menyusun Elemen Bertindih Bertindih Secara Benar dalam CSS?

Menyelesaikan Pertindihan Elemen Kedudukan Mutlak untuk Susunan Menegak

Dalam CSS, sifat kedudukan boleh ditetapkan kepada pelbagai nilai, termasuk relatif, mutlak dan tetap. Apabila sesuatu elemen diletakkan secara mutlak, ia dialih keluar daripada aliran dokumen biasa dan diposisikan secara relatif kepada nenek moyang kedudukan terdekatnya atau ruang pandang. Tingkah laku ini boleh menyebabkan elemen disusun di atas satu sama lain, yang mungkin bukan kesan yang diingini.

Memahami Kedudukan Elemen

• Statik (lalai): Elemen bertindan seperti biasa dalam aliran dokumen.
• Relatif: Elemen kekal dalam aliran dokumen, tetapi kedudukannya boleh dilaraskan menggunakan bahagian atas, kanan, bawah dan kiri.
• Mutlak: Elemen dialih keluar daripada aliran dokumen dan diletakkan secara relatif kepada yang terdekat. nenek moyang berkedudukan.

Bertindih Elemen Kedudukan Mutlak

Dalam contoh berikut, unsur-unsur dengan kelas .row dan .col diposisikan secara mutlak, menyebabkan ia bertindih:

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

Untuk menyelesaikan isu ini dan mempunyai elemen tindanan secara menegak, kita perlu menentukan ketinggiannya dan pastikan kedudukan menegak mereka diuruskan dengan betul.

Penyelesaian Tanpa Mengalihkan Sifat Kedudukan

Sementara itu tidak sesuai untuk mengubah suai CSS untuk elemen, penyelesaian yang mungkin tanpa mengalih keluar sifat kedudukan adalah dengan menentukan ketinggian setiap .row dan melaraskan sifat atas .row kedua untuk mengambil kira ketinggian .row pertama:

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

Memahami Penyelesaian

• Kami mengekalkan kedudukan mutlak elemen.
• Kami nyatakan ketinggian bagi setiap .baris untuk membolehkan tindanan menegak.
• Kami melaraskan sifat atas .row kedua (#row2) untuk mengimbanginya dengan ketinggian .row pertama (#row1).

Pertimbangan

• Pastikan ketinggian elemen .row adalah tepat dan termasuk sebarang pelapik atau margin.
• Penyelesaian ini mungkin tidak sesuai untuk kandungan yang dijana secara dinamik dengan ketinggian yang tidak diketahui.
• Secara amnya, tidak disyorkan untuk mempunyai berbilang elemen kedudukan mutlak bersarang kerana ia boleh membawa kepada tingkah laku yang kompleks.

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