我們可以在純 CSS 中將多個黏性元素堆疊在一起嗎？-css教學-PHP中文網

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

DDD

發布： 2024-11-01 02:00:02

原創

908 人瀏覽過

Can we Stack Multiple Sticky Elements on Top of Each Other in Pure 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中文網其他相關文章！