純CSS中可以堆疊多個黏性元素嗎？

是否可以在純 CSS 中將多個黏性元素堆疊在一起？

可以在此處看到所需的行為：
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

只是我更喜歡使用純CSS，而不是Javascript 實作。我已經嘗試了多個黏性元素，但我無法阻止它們推出其他黏性元素。我嘗試將它們放在相同的堆疊上下文中：

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

但無法讓它工作，如下所示。任何見解將不勝感激！

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

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

以上是純CSS中可以堆疊多個黏性元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！