為什麼 `overflow:hidden` 會破壞 `position:sticky` 行為？

為什麼overflow:hidden會幹擾position:sticky行為

在Web開發中，position:sticky允許元素在使用者使用時保持可見並定位在其容器內滾動父容器或視窗。但是，當容器應用了溢出：隱藏時，它可能會阻止position：sticky按預期工作。

原始問題：

考慮以下HTML代碼：

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

黏性元素將在使用者時保持可見並位於父 div內

溢出問題：

如果在父div中添加overflow:hidden，粘性元素將不再粘在容器頂部並會滾動滾動出於view.

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

原因：

overflow:hidden隱藏任何超出其容器邊界的內容。這包括位於容器可見區域之外的黏性元素。

解：

為了防止溢出：隱藏幹擾位置：黏性，您可以兩個選項：

• 使用現代技術：自從最初發布這個問題以來，CSS 已經發展到引入了contains:paint。透過在父容器上設定 contains:paint ，可以防止溢出的內容逃逸，並確保黏性元素保持可見並正確定位。

.parent {
  contain: paint;
}

• 調整溢位屬性: 或者，您可以將溢位屬性設定為自動或捲動而不是隱藏。這允許內容延伸到容器的邊界之外，並確保黏性元素保持可見。

.parent {
  overflow: auto;
  /* or */
  overflow: scroll;
}

以上是為什麼 `overflow:hidden` 會破壞 `position:sticky` 行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！