position: sticky 不生效主因是父容器未提供滚动上下文：height: 100vh 截断内容致滚动移交外层；overflow 非 visible（含 hidden/auto/scroll/x-hidden）直接禁用；transform/filter/will-change 在父级创建新层叠上下文中断粘性；且必须设置 top/bottom/left/right 阈值。
position: sticky 不生效，90% 是父容器“没给它滚动的机会”——不是 CSS 写错了，而是它根本没地方可粘。
父容器 height: 100vh 导致 sticky 失效
这是最隐蔽也最常踩的坑：你给 .page 或 .wrapper 设置了 height: 100vh，内容一长就被截断，浏览器被迫把滚动交给更外层（比如 body 或 html），而 sticky 元素只认「最近的、有滚动行为的祖先」。一旦它的直接父容器不滚动，position: sticky 就彻底失效。
- ✅ 改成
min-height: 100vh，保留内容撑高空间 - ✅ 确保该父容器本身能产生滚动（比如子内容高度 > 容器高度）
- ❌ 不要对 sticky 元素的任意父级设
height: 100vh或max-height类固定高度
父容器 overflow 非 visible 直接禁用 sticky
只要 sticky 元素的任意一个祖先元素设置了 overflow: hidden、overflow: auto、overflow: scroll，甚至只是 overflow-x: hidden，sticky 就会立即失效——CSS 规范明确要求：sticky 的滚动容器必须是 overflow: visible 的祖先。
- ✅ 检查从
body到 sticky 元素父级的所有容器，逐个确认overflow值 - ✅ 特别注意
body上是否误加了overflow-x: hidden（为防横向滚动条） - ❌ 不要用
overflow: hidden裁剪父容器来“美化布局”，它会连 sticky 一起干掉
transform / filter / will-change 中断粘性上下文
这些属性会创建新的层叠上下文（stacking context），导致 sticky 元素的“滚动锚点”被重置到这个新上下文边界，而不是预期的视口或外层容器。
- ✅ 把
transform、filter、will-change移到 sticky 元素自身上（而非其父容器） - ✅ 若父容器必须动效，改用
translateZ(0)替代transform: translateX(...)（部分场景兼容性更好） - ❌ 不要在 sticky 元素的父级上同时用
transform和overflow: visible—— 两者叠加，sticky 几乎必挂
top / left 等阈值未设置或冲突
position: sticky 必须配合 top、bottom、left 或 right 才能触发粘性行为；不设等于白写。而且同方向两个值共存时存在优先级：比如 top: 0 和 bottom: 0 同时存在，top 生效；left: 0 和 right: 0 同时存在，left 生效。
- ✅ 至少指定一个方向偏移，例如
top: 0（吸顶）、bottom: 0（吸底） - ✅ 避免在同一个规则里写
top: 0; bottom: 0，除非你清楚它最终只按 top 工作 - ✅ 在多 sticky 元素共存时，用
z-index明确层级，否则后出现的会覆盖前面的
真正卡住人的从来不是 position: sticky 这行代码本身，而是它背后那套隐式依赖：谁在滚动、谁被裁剪、谁创建了新层叠上下文。调的时候别只盯着元素自己，得顺着 DOM 往上摸三层父节点，挨个看 overflow、height、transform——漏掉任何一个，sticky 就静默退出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
