我們可以在純 CSS 中將多個黏性元素堆疊在一起嗎？

在純CSS 中實現多個堆疊的絕對定位黏性元素

問題：

是否可以在純CSS中將多個黏滯元素堆疊在彼此之上？

範例：

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

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

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

但它無法正常工作，正如你可以在下面的 .html 片段中看到的。任何見解都將不勝感激！

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

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