为什么我的粘性元素不再粘在 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中文网其他相关文章！