Wie stapele ich in reinem CSS mehrere Sticky-Elemente übereinander?

Das Problem verstehen:

Mehrere Sticky-Elemente, die in reinem CSS übereinander gestapelt sind, können in der Regel eine Herausforderung darstellen andere klebrige Elemente herausdrücken. Das bereitgestellte Beispiel in der Frage veranschaulicht dieses Verhalten, bei dem zwei klebrige Überschriften („Klebende Überschrift“ und „Beide Überschriften sollten gleichzeitig haften bleiben“) beim Scrollen nicht gestapelt bleiben.

Die Lösung:

Um das gewünschte Verhalten zu erreichen, müssen Sie durch Hinzufügen von Offsets dafür sorgen, dass alle Sticky-Elemente am selben Container (enthaltenden Block) haften bleiben. Hier ist eine Aufschlüsselung der Lösung:

• Bestimmen Sie den Container:

  • Identifizieren Sie das übergeordnete Element, an dem alle klebrigen Elemente haften sollen (z. B. das
    -Element).

• Sticky-Positionierung anwenden:

  • Position hinzufügen: sticky Eigenschaft für alle Sticky-Elemente.

• Offset-Abstände festlegen:

  • Verwenden Sie die obere Eigenschaft, um den Offset-Abstand anzugeben von der Oberkante des Behälters.

• Passen Sie den Versatzabstand an:

  • Jedes nachfolgende klebrige Element sollte seine obere Eigenschaft haben Wert erhöht um die Höhe des/der vorhergehenden klebrigen Element(s), um sicherzustellen, dass sie korrekt gestapelt werden.

Beispielcode:

Hier ist eine modifizierte Version Ihres bereitgestellten Codes mit Offsets, die den Sticky-Elementen hinzugefügt wurden. Die Sticky-Elemente werden nun beim Scrollen übereinander gestapelt:

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

Durch die Einbindung des Konzepts der Offsets bleiben die Sticky-Elemente in diesem Beispiel beim Scrollen nun ordnungsgemäß gestapelt.

Das obige ist der detaillierte Inhalt vonWie stapele ich in reinem CSS mehrere Sticky-Elemente übereinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!