关于 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 粘性布局失效：水平滚动后粘性效果消失怎么办？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2651218.html
