首頁  >  文章  >  web前端  >  我們可以在純 CSS 中將多個黏性元素堆疊在一起嗎?

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

DDD
DDD原創
2024-11-01 02:00:02920瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn