sticky元素必须显式设置top/bottom/left/right之一（垂直优先top、水平优先left），且父容器需有滚动上下文（非hidden/无transform等干扰），否则退化为relative；Safari对transform敏感，动态插入需用requestAnimationFrame。
sticky 元素必须显式设置 top / bottom / left / right
不设阈值，position: sticky 就是摆设——它会退化为 position: relative，滚动时完全无反应。浏览器不会报错，DevTools 里 computed position 还显示 sticky，但行为已失效。
常见错误写法：.nav { position: sticky; }（缺 top 或其它偏移）
- 必须且只能指定一个轴向的主阈值：垂直方向优先用
top（比bottom高优先级），水平方向优先用left（比right高） - 可同时设
top和left，实现“左上角吸附”，比如表格表头+首列固定 - 值可以是
0、10px、1rem等，但不能是百分比（top: 10%无效）
父容器必须是“有效滚动上下文”
sticky 不绑定视口，而是绑定**最近的、有滚动能力的祖先容器**。如果这个容器被锁死，sticky 就找不到锚点。
典型失效场景：body 或中间某层 div 设置了 overflow: hidden、auto 或 scroll，且该层没有 position: relative 等定位属性，sticky 就直接退化为 static。
- 检查路径上所有父级（直到
）的overflow值，尤其注意 CSS 框架自带的容器类（如.ant-layout、.container-fluid） - 若必须用
overflow: auto截断内容，加一层position: relative的 wrapper 包住 sticky 元素 - 父容器高度不能为
0或由display: contents/float导致塌陷；height: 100vh或min-height: 100vh是稳妥选择
Safari 和 transform 父容器是隐形杀手
Safari 15.0–15.3 对 transform、filter、will-change 敏感：只要 sticky 元素任意祖先用了这些属性，就会创建新层叠上下文，破坏 sticky 边界。
现象：Chrome 正常，Safari 下 sticky 元素滚动时突然“掉下去”或完全不动。
- 临时排查：在 Safari DevTools 中禁用祖先元素的
transform，看 sticky 是否恢复 - 规避方案：把 sticky 元素提到更高层级，避开带
transform的容器；或改用translateZ(0)替代transform: translateX() - 动态插入的 sticky 元素（如 React 中 useEffect 创建）可能因渲染时机晚于布局计算而初始不生效，可用
requestAnimationFrame延迟应用样式
多方向 sticky 的边界不是视口，而是滚动容器
很多人误以为 top: 0; left: 0 就能钉死在屏幕左上角——其实它只在**最近滚动容器内**生效。容器滚动出视口，sticky 元素也会跟着走。
例如：一个高 300px、overflow: auto 的 .table-wrapper 里放 sticky 表头，表头只在该 wrapper 内部滚动时固定，不影响页面其他区域。
- 想让 sticky 绑定整个页面？确保它的最近滚动祖先就是
body或html，且它们没被overflow锁死 - Flex / Grid 容器默认可作为 sticky 边界，但前提是自身未被更上层的
overflow或transform干扰 - 用 DevTools Layout 面板查看 “Sticky constraint rectangle”，能直观看到它实际生效的矩形范围
真正卡住人的从来不是语法，而是 sticky 背后那一整套隐式依赖：父容器的高度、overflow、transform、层叠上下文、甚至 Safari 版本。写完 position: sticky; top: 0 只是开始，不是结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
