CSS sticky 粘性定位失效：当表格水平滚动超过 300px 后，如何修复？

css sticky 粘性问题

在 css 中使用 sticky 定位时，有时会出现超出预期范围的情况。针对代码中遇到的问题，左右滚动后粘性失效的情况，可以通过修改 table-body 的 display 属性来解决。

问题描述

代码中使用 sticky 定位了表格头部的单元格，希望它们在左右滑动时保持固定在页面左侧。然而，当水平滚动超过 300px 后，粘性失效。

解决方法

可以通过将 table-body 的 display 属性修改为 flex 来解决此问题：

.table-body {
    display: flex;
}

粘性元素将“粘”到其最近的具有滚动机制的祖先元素。在给出的代码中，table-body 是最近的具有滚动机制的祖先元素。但是，由于 table-body 默认是块级元素，因此粘性元素只能在其内部粘性。将 table-body 更改为 flex 容器后，它的宽度将变为非固定，从而使粘性元素可以在整个容器中粘性。

以上就是CSS sticky 粘性定位失效：当表格水平滚动超过 300px 后，如何修复？的详细内容，更多请关注硕下网其它相关文章！