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

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:

  <div class="container">
    <div>
<p>Dengan persediaan ini, niatnya adalah untuk mempunyai dua elemen <strong>.row</strong> 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?</p>
<p><strong>Memahami Penentududukan CSS</strong></p>
<p>Untuk mencari penyelesaian, adalah penting untuk memahami pelbagai jenis penentududukan CSS :</p>
<ul>
<li>
<strong>statik</strong>: Elemen mengalir secara normal dalam reka letak dokumen.</li>
<li>
<strong>relatif</strong>: Elemen bergerak berdasarkan offset atas, kanan, bawah dan kiri, tetapi kekal dalam aliran dokumen.</li>
<li>
<strong>mutlak</strong>: Elemen dialih keluar daripada aliran dokumen dan diposisikan secara relatif kepada <strong>nenek moyang diposisikan</strong> terdekatnya (bukannya induk).</li>
<li>
<strong>ditetapkan</strong>: Elemen dialih keluar daripada aliran dokumen dan diletakkan secara relatif kepada port pandangan, menatal dengan halaman.</li>
</ul>
<p><strong>Masalahnya dengan Elemen Bertindih</strong></p>
<p>Dalam contoh kami, Elemen <strong>.row</strong> dan <strong>.col</strong> 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.</p>
<p><strong>Penyelesaian: Double Nesting</strong></p>
<p>Satu penyelesaian yang tidak lazim tetapi berkesan ialah mencipta elemen bekas kedua yang meletakkan baris benar-benar:</p>
<pre class="brush:php;toolbar:false">
  <div class="container">
    <div class="inner-container">
      <div>
<pre class="brush:php;toolbar:false">.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.