理解問題：
在純CSS 中相互堆疊的多個粘性元素可能很難實現，因為它們往往會推出其他粘性元素。問題中提供的範例演示了這種行為，其中兩個黏性標題（「黏性標題」和「兩個標題應同時黏住。」）在滾動時不會保持堆疊狀態。
解決方案：
要實現所需的行為，需要透過添加偏移量使所有黏性元素黏在同一個容器（包含區塊）上。以下是解決方案的細分：
確定容器：
應用黏性定位：
設定偏移距離：
調整偏移距離：
範例程式碼：
這裡您提供的程式碼的修改版本，其中加入了黏性元素的偏移量。現在，滾動時黏性元素將堆疊在一起：
<code class="html"><div id="container">
<article id="sticky">
<header>Both headings should stick at the same time.</header>
<main>
<h1 class="sticky-1">Sticky heading</h1>
<p>Some copy goes here...</p>
</main>
</article>
<article id="fixed">
<header>Fixed heading</header>
<main>
<h1 class="sticky-1">Sticky heading</h1>
<p>Some copy goes here...</p>
</main>
</article>
</div></code><code class="css">#sticky .sticky-1,
#sticky .sticky-2 {
position: sticky;
}
#sticky .sticky-1 {
top: 1em;
}
#sticky .sticky-2 {
top: calc(1em + 50px);
}
#fixed .sticky-1 {
position: fixed;
top: 0;
}
#fixed .sticky-2 {
position: fixed;
top: 1em;
}</code>透過合併偏移的概念，此範例中的黏性元素現在將在滾動時保持正確堆疊。
以上是如何在純 CSS 中將多個黏性元素堆疊在一起？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
