纯CSS中可以堆叠多个粘性元素吗？

是否可以在纯 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中文网其他相关文章！