純粋な CSS で複数のスティッキー要素を互いに積み重ねるにはどうすればよいですか?

問題の理解:

純粋な CSS で複数のスティッキー要素を積み重ねると、実装が困難になる可能性があります。他の厄介な要素を押し出します。質問に示されている例は、この動作を示しています。ここでは、2 つの固定見出し (「固定見出し」と「両方の見出しを同時に固定する必要があります。」) がスクロール時に積み重ねられたままになりません。

解決策:

目的の動作を実現するには、オフセットを追加して、すべてのスティッキー要素を同じコンテナー (ブロックを含む) に固定する必要があります。解決策の内訳は次のとおりです:

• コンテナを決定します:

  • すべてのスティッキー要素が付着する親要素を特定します。 (例:
    要素)。

• Apply Sticky Positioning:

  • 位置を追加: Sticky

• オフセット距離の設定:

  • 一番上のプロパティを使用してオフセット距離を指定します

• オフセット距離を調整します:

  • 後続の各スティッキー要素には、top プロパティが必要です。値は、それらが正しくスタックされることを保証するために、先行するスティッキー要素の高さによって増分されます。

コード例:

は次のとおりです。スティッキー要素にオフセットが追加された、提供されたコードの修正バージョン。スティッキー要素は、スクロール時に互いに積み重ねられるようになります:

<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 中国語 Web サイトの他の関連記事を参照してください。