CSS sticky 粘性定位失效?从滚动容器到 overflow 的排查实录
做后台列表页时,经常需要把表头或者某个过滤条固定在容器顶部。position: sticky 看起来是干这事的天然选择,写一行 top: 0 就能生效,但实际项目里它经常纹丝不动。上周在重构一个 antd 表格页面时又踩了一次:表头设置了 sticky,页面滚动时完全不吸顶。排查后发现原因并不在 sticky 本身,而在祖先元素的 overflow 上。这篇文章记录这次排查过程,涉及滚动容器如何决定 sticky 的参照物、父级 overflow 取值对吸附行为的影响,以及用 IntersectionObserver 辅助定位滚动边界的方法。代码都是 Vue 3 + TypeScript 的实...