position: sticky 必须显式设置 top/bottom/left/right 至少一个偏移值，否则退化为 relative；未设偏移时浏览器无法确定锚点，规范强制要求失效。
sticky 不写 top/bottom/left/right 就是 relative
直接说结论：position: sticky 本身不带任何定位偏移，浏览器根本不知道“粘到哪”，只能退化为 position: relative。这不是 bug，是规范强制要求——sticky 必须有锚点，否则无法判断何时切换定位模式。
常见错误现象：写了 position: sticky，但元素该滚还滚、该动还动，完全没“吸住”感。打开开发者工具一看，computed style 里 position 确实是 sticky，但行为就是 relative。
- 必须显式设置至少一个方向的偏移值，比如
top: 0、left: 16px -
top和bottom同时存在时，只认top；left和right同时存在时，只认left - 设
top: auto或top: unset等无效值，等同于没设，照样失效
阈值不是“距离视口”，而是“距离滚动容器边界”
很多人以为 top: 10px 是让元素离浏览器顶部 10px 时固定，其实它是相对于“最近的可滚动祖先容器”的内边距起点计算的。这个细节直接决定粘性是否触发。
典型场景：
- 元素直接在
下，body可滚动 →top: 0表示粘到视口顶部 - 元素在一个
div.scroll-container { height: 300px; overflow: auto; }里 →top: 0表示粘到该div的顶部内边缘，不是整个页面顶部 - 如果这个
div高度只有 200px，而 sticky 元素高 220px，那它根本没空间“滚动进入阈值”，直接卡死或不生效
overflow: hidden 是 sticky 的硬性杀手
只要 sticky 元素任意上层父容器设置了 overflow: hidden（哪怕只是 overflow-x: hidden），sticky 就彻底失效。这不是兼容性问题，是规范明确定义的行为：该容器不再被视为“可滚动上下文”，sticky 失去参考系。
容易踩的坑：
-
overflow: hidden常被用于清除浮动或隐藏溢出，但它会静默杀死 sticky -
overflow: clip同样禁止 sticky（2023 年后新增，但效果等同于 hidden） -
transform、will-change、filter等属性也会创建新的 stacking context 并间接破坏 sticky 的滚动上下文链
父容器高度不足或内容撑不开滚动空间
sticky 元素需要“滚动空间”才能触发阈值检测。如果它所在的滚动容器没有真实滚动行为（比如高度刚好等于内容、或内容太短），浏览器根本不会触发滚动事件，阈值永远达不到。
检查点：
- 滚动容器自身高度要大于 sticky 元素高度（至少留出 1px 余量）
- 容器内部要有足够内容（或伪元素、
min-height）撑开可滚动区域 - 移动端 Safari 对嵌套滚动 + sticky 组合尤其敏感，建议用
min-height: 100vh+overflow-y: auto显式声明
最隐蔽的问题往往不在 sticky 元素本身，而在它上面三层的某个 div 上悄悄加了 overflow: hidden，或者父容器被 flex 布局压缩到零高度——这些地方不细查，光调 top 值毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
