Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menyusun Elemen yang Diposisikan Benar Secara Menegak Tanpa Mengalihkan Kedudukan Mutlak/Relatif?
Bagaimana untuk Menyusun Elemen yang Diposisikan Benar Secara Menegak Tanpa Mengalihkan Kedudukan Mutlak/Relatif?
- Susan Sarandonasal
- 2024-12-25 07:54:12617semak imbas
Dilema Kedudukan: Elemen Bertindih dengan Kedudukan Mutlak
Dalam reka bentuk web, penggunaan kedudukan mutlak boleh berguna untuk mencipta reka letak elemen tertentu. Walau bagaimanapun, ia juga boleh menimbulkan cabaran, terutamanya apabila cuba menyusun elemen satu demi satu secara menegak.
Pertimbangkan coretan CSS berikut:
body {
position: relative;
min-height: 2em;
width: 100%;
}
.container {
position: absolute;
}
.row {
position: relative;
}
.col1,
.col2 {
position: absolute;
}
Dan HTML yang sepadan:
<body>
<div class="container">
<div>
Dengan persediaan ini, niatnya adalah untuk mempunyai dua elemen .row bertindan secara menegak, bukannya bertindih antara satu sama lain seperti yang mereka lakukan pada masa ini. Bagaimanakah ini boleh dicapai tanpa mengalih keluar sifat penentududukan mutlak/relatif?
Memahami Penentududukan CSS
Untuk mencari penyelesaian, adalah penting untuk memahami pelbagai jenis penentududukan CSS :
- statik: Elemen mengalir secara normal dalam reka letak dokumen.
- relatif: Elemen bergerak berdasarkan offset atas, kanan, bawah dan kiri, tetapi kekal dalam aliran dokumen.
- mutlak: Elemen dialih keluar daripada aliran dokumen dan diposisikan secara relatif kepada nenek moyang diposisikan terdekatnya (bukannya induk).
- ditetapkan: Elemen dialih keluar daripada aliran dokumen dan diletakkan secara relatif kepada port pandangan, menatal dengan halaman.
Masalahnya dengan Elemen Bertindih
Dalam contoh kami, Elemen .row dan .col diletakkan secara mutlak. Ini bermakna ia dikeluarkan daripada aliran dokumen biasa dan disusun di atas satu sama lain. Untuk menyelesaikan masalah ini, kita perlu mencari cara untuk mengekalkannya dalam aliran dokumen sambil mengekalkan kedudukan mutlak untuk tujuan susun atur tertentu.
Penyelesaian: Double Nesting
Satu penyelesaian yang tidak lazim tetapi berkesan ialah mencipta elemen bekas kedua yang meletakkan baris benar-benar:
<body>
<div class="container">
<div class="inner-container">
<div>
.container {
position: relative;
min-height: 2em;
width: 100%;
}
.inner-container {
position: absolute;
}
.row {
position: relative;
}
.col1,
.col2 {
position: absolute;
}
Dengan sarang berganda ini, .bekas dalam kini bertindak sebagai moyang kedudukan yang paling hampir untuk baris . elemen. Akibatnya, baris disusun secara menegak, mengekalkan reka letak asal sambil menyelesaikan isu bertindih.
Nota: Penyelesaian ini mengekalkan kedudukan mutlak untuk tujuan susun atur lain sambil mencapai tindanan menegak yang diingini elemen. Walau bagaimanapun, ia tidak disyorkan untuk kegunaan umum dan harus digunakan sebagai pilihan terakhir apabila mengalih keluar kedudukan mutlak/relatif bukan pilihan.
Atas ialah kandungan terperinci Bagaimana untuk Menyusun Elemen yang Diposisikan Benar Secara Menegak Tanpa Mengalihkan Kedudukan Mutlak/Relatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!