為什麼我的黏性元素不再黏在 Flexbox 容器中？

使用 Flexbox 時粘性元素被卡住

您遇到了粘性元素在放置在 Flexbox 容器中時失去粘性的問題。發生這種情況是因為 Flexbox 元素本質上會拉伸以填充其可用空間，導致所有元素共享相同的高度並阻礙垂直滾動。

修補：調整對齊方式

解決為此，將「align-self：flex-start」加入黏性元素。這會強制元素的高度自動設定而不是固定，從而允許頁面按預期滾動。

瀏覽器相容性

雖然大多數瀏覽器支援此修復，但 Safari 需要「-webkit-」前綴用於黏性定位。此外，黏性定位可能會在除 Firefox 之外的某些瀏覽器中出現表格問題。

更新的程式碼：

.flexbox-wrapper {
  display: flex;
  overflow: auto;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

以上是為什麼我的黏性元素不再黏在 Flexbox 容器中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！