关于 css sticky 粘性布局的问题
你遇到了一个关于 css sticky 定位的难题，你的代码可以将左侧列锁定为粘性，但在水平滚动超过 300px 时粘性效果就会消失。
原因
sticky 元素会“粘”到其最近的具有“滚动机制”的祖先元素。在你提供的代码中，table-body 被设置了 overflow: auto;，使得水平滚动条生效。但是，table-body 的宽度是固定的（300px），因此当水平滚动超过该宽度时，sticky 元素就会脱离其祖先元素，导致粘性效果失效。
立即学习“前端免费学习笔记（深入）”；
解决方案
要解决此问题，可以将 table-body 的宽度设置为非固定，使其能够与水平滚动条一起扩展。可以将以下 css 添加到你的代码中：
.table-body {
display: flex;
}通过将 table-body 设置为 display: flex;，它将成为一个灵活的容器，可以随着水平滚动条的扩展而扩展。现在，sticky 元素将能够在整个可滚动区域内保持粘性。
以上就是CSS Sticky 粘性布局失效：水平滚动后粘性效果消失怎么办？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
544
收藏
