Können mehrere Sticky-Elemente in reinem CSS gestapelt werden?

Ist es möglich, in reinem CSS mehrere Sticky-Elemente übereinander zu stapeln?

Das gewünschte Verhalten ist hier zu sehen:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Nur ​​ich würde lieber reines CSS anstelle einer Javascript-Implementierung verwenden. Ich habe ein wenig mit mehreren klebrigen Elementen experimentiert, aber ich kann nicht verhindern, dass sie andere klebrige Elemente verdrängen. Ich habe versucht, sie im gleichen Stapelkontext zu platzieren:

<code class="css">#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}</code>

Aber es funktioniert nicht, wie Sie unten sehen können. Für jeden Einblick wären wir sehr dankbar!

<code class="html"><div id="container">
  <article id="sticky">
    <header>

    </header>
    <main><h1 class="sticky-1">Sticky heading</h1></code>

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