首頁 >web前端 >css教學 >為什麼我的黏性元素不再黏在 Flexbox 容器中?

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

Susan Sarandon
Susan Sarandon原創
2024-12-16 01:00:10544瀏覽

Why Does My Sticky Element Stop Sticking in a Flexbox Container?

使用 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn