Können wir in reinem CSS mehrere Sticky-Elemente übereinander stapeln?

Implementierung mehrerer gestapelter, absolut positionierter Sticky-Elemente in reinem CSS

Frage:

Ist das in reinem CSS möglich? How to Mehrere Klebeelemente übereinander stapeln?

Beispiel:

https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Ich bevorzuge die Verwendung reines CSS, keine JavaScript-Implementierung. Ich habe mehrere klebrige Elemente ausprobiert, aber ich kann nicht verhindern, dass sie andere klebrige Elemente verdrängen. Ich habe versucht, sie in denselben Stapelkontext zu platzieren:

#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}

, aber es hat nicht funktioniert, wie Sie im .html-Snippet unten sehen können. Für jeden Einblick wäre ich sehr dankbar!

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

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