如何在純 CSS 中將多個黏性元素堆疊在一起？

理解問題：

在純CSS 中相互堆疊的多個粘性元素可能很難實現，因為它們往往會推出其他粘性元素。問題中提供的範例演示​​了這種行為，其中兩個黏性標題（「黏性標題」和「兩個標題應同時黏住。」）在滾動時不會保持堆疊狀態。

解決方案：

要實現所需的行為，需要透過添加偏移量使所有黏性元素黏在同一個容器（包含區塊）上。以下是解決方案的細分：

• 確定容器：

  • 識別所有黏性元素應貼上的父元素（例如，
    元素）。

• 應用黏性定位：

  • 新增位置：黏性屬性到所有黏性元素。

• 設定偏移距離：

  • 使用頂部屬性指定偏移距離從容器的頂部邊緣開始。

• 調整偏移距離：

  • 每個後續黏性元素都應該有其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中文網其他相關文章！