純粋な CSS で複数のスティッキー要素を積み重ねることはできますか?

純粋な CSS でスタックされた複数の絶対配置スティッキー要素を実装する

質問:

純粋な CSS で可能ですか?複数のスティッキー要素を互いに積み重ねますか?

例:

https://webthemez.com/demo/sticky-multi-header-scroll/index.html

使用することを好みますJavaScript の実装ではなく、純粋な 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;
}

に配置しようとしましたが、以下の .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 中国語 Web サイトの他の関連記事を参照してください。