Bagaimana untuk Menyusun Elemen yang Diposisikan Benar Secara Menegak Tanpa Mengalihkan Kedudukan Mutlak/Relatif?-tutorial css-php.cn

Bagaimana untuk Menyusun Elemen yang Diposisikan Benar Secara Menegak Tanpa Mengalihkan Kedudukan Mutlak/Relatif?

Susan Sarandon

Lepaskan： 2024-12-25 07:54:12

asal

614 orang telah melayarinya

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

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;
}

Salin selepas log masuk

Dan HTML yang sepadan:

<body>
  <div class="container">
    <div>

Salin selepas log masuk

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>

Salin selepas log masuk

.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

Salin selepas log masuk

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!