理解问题：
在纯 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中文网其他相关文章！
