粘性定位失效的四大原因：一是父容器overflow非visible；二是未设置top等偏移值；三是元素display为table相关类型；四是位于absolute或fixed定位祖先内。
粘性定位（position: sticky）不起作用，通常不是 CSS 写错了，而是被几个常见条件“悄悄拦住了”。只要满足以下关键前提，top 才会生效。
父容器不能是 overflow:hidden 或 scroll/ auto
sticky 的触发依赖于**滚动容器的滚动行为**。如果最近的可滚动祖先元素设置了 overflow: hidden、scroll 或 auto，且其高度不足以产生滚动，sticky 就不会激活。
- 检查 sticky 元素的所有父级，特别是直接父容器
- 临时移除
overflow声明，或改为visible测试是否恢复 - 若必须限制溢出，可考虑用
clip-path或 wrapper 分离滚动逻辑
必须设置有效的偏移值（如 top / bottom）
position: sticky 本身不指定位置，它需要配合 top、bottom、left 或 right 才能定义“粘住”的临界点。
- 只写
position: sticky没有效果，必须加top: 0这类值 - 数值支持 px、rem、% 等，但
top: 0%在某些旧浏览器中可能不可靠，推荐用top: 0或top: 1rem - 若设了
top却仍不粘，说明它还没“到达”那个滚动位置——确保页面有足够内容让容器可滚动
元素不能是 table 相关 display 类型
sticky 在 display: table-cell、table-row、inline-table 等表格显示模式下被规范明确禁止。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed styles 中的
display值，尤其注意继承或框架默认样式（如 Ant Design 表格单元格） - 改用
display: block或flex等兼容模式 - 若需保持表格布局语义，可用 wrapper 包裹后对 wrapper 应用 sticky
不能是绝对定位/固定定位的子元素
sticky 元素的定位上下文必须是**正常的文档流滚动容器**。如果它被嵌套在 position: absolute 或 position: fixed 的祖先里，就会失去粘性行为。
- 查看 DOM 树中 sticky 元素上方是否有
position: absolute/fixed的父级 - 这类父容器会创建新的定位上下文，导致 sticky 失效
- 解决方案：把 sticky 元素提升到该父级之外，或改用 JS 模拟粘性（如 IntersectionObserver + class 切换）
