Bagaimana untuk Menyusun Berbilang Elemen Melekit di Atas Satu Sama Lain dalam CSS Tulen?

Memahami Isu:

Berbilang elemen melekit yang disusun di atas satu sama lain dalam CSS tulen boleh mencabar untuk dilaksanakan, kerana ia cenderung untuk tolak keluar unsur melekit lain. Contoh yang disediakan dalam soalan menunjukkan tingkah laku ini, di mana dua tajuk melekit ("Tajuk melekit" dan "Kedua-dua tajuk harus melekat pada masa yang sama.") tidak kekal bertindan apabila ditatal.

The Penyelesaian:

Untuk mencapai tingkah laku yang diingini, anda perlu membuat semua elemen melekit melekat pada bekas yang sama (mengandungi blok) dengan menambah offset. Berikut ialah pecahan penyelesaian:

• Tentukan Bekas:

  • Kenal pasti elemen induk yang harus melekat pada semua elemen melekit (cth., elemen ).

• Gunakan Kedudukan Melekit:

  • Tambahkan kedudukan: melekit harta kepada semua elemen melekit.

• Tetapkan Jarak Offset:

  • Gunakan sifat atas untuk menentukan jarak offset dari tepi atas bekas.

• Laraskan Jarak Offset:

  • Setiap elemen melekit berikutnya harus mempunyai sifat teratasnya nilai ditambah dengan ketinggian unsur melekit sebelumnya untuk memastikan ia disusun dengan betul.

Kod Contoh:

Ini versi diubah suai bagi kod yang anda sediakan dengan offset ditambahkan pada elemen melekit. Elemen melekit kini akan bertindan di atas satu sama lain apabila ditatal:

<code class="html"><div id="container">
  <article id="sticky">
    <header>Both headings should stick at the same time.</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>

  <article id="fixed">
    <header>Fixed heading</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>
</div></code>

<code class="css">#sticky .sticky-1,
#sticky .sticky-2 {
  position: sticky;
}
#sticky .sticky-1 {
  top: 1em;
}
#sticky .sticky-2 {
  top: calc(1em + 50px);
}
#fixed .sticky-1 {
  position: fixed;
  top: 0;
}
#fixed .sticky-2 {
  position: fixed;
  top: 1em;
}</code>

Dengan menggabungkan konsep ofset, elemen melekit dalam contoh ini kini akan kekal disusun dengan betul semasa menatal.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Berbilang Elemen Melekit di Atas Satu Sama Lain dalam CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!