是否可以在純 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中文網其他相關文章!