sticky元素被父容器高度截断，因position: sticky依赖最近可滚动祖先，其高度决定粘性边界；超出即退化为static。height: 100vh会静默截断，应改用min-height: 100vh；祖先overflow:hidden/auto/scroll、inline元素未设display块级化均会导致失效。
sticky元素被父容器高度截断
因为 position: sticky 的生效范围严格绑定在「最近的可滚动祖先容器」内部，而这个容器的高度决定了粘性行为的上下边界。一旦 sticky 元素滚动到超出该容器计算出的高度范围，它就自动退出粘性状态，退化为 position: static —— 不是“消失”，而是回归文档流位置。
height: 100vh 是最典型的静默截断源
写 height: 100vh 相当于告诉浏览器：“这个容器就只能高一屏，多一像素也不许撑”。哪怕子内容撑出了 3 屏高，滚动容器仍被判定为「不可滚动」，sticky 因无滚动上下文而直接失效。
- ✅ 改用
min-height: 100vh：既保底视口高度，又允许内容自然延伸，滚动上下文完整保留 - ❌ 不要依赖 flex/grid 父容器“自动撑高”：若父级是
display: flex; flex-direction: column且没设height/max-height/min-height，浏览器可能无法识别其为可滚动区域 - ⚠️ 注意 grid 布局中
grid-template-rows: auto 1fr的1fr需要父容器有明确高度约束，否则1fr会塌陷，导致 sticky 失效
祖先 overflow 是另一个隐形截断点
只要任意上层祖先（哪怕隔了 5 层）设置了 overflow: hidden、auto 或 scroll，且该祖先本身不滚动，就会创建新的块格式化上下文（BFC），强行切断 sticky 的锚定链——结果就是 computed position 显示为 static，top 值压根不参与计算。
- 用 Chrome DevTools 的 Computed 面板逐级向上查
overflow-x和overflow-y的最终值，重点盯hidden - 临时加
overflow: visible !important到可疑祖先，若 sticky 恢复，问题就定位准了 - 业务上必须裁剪时，优先用
clip-path: inset(0)替代overflow: hidden，它不影响 sticky 行为
sticky 元素自身不是 inline 类型
规范明确禁止对纯 inline 元素（如 、）启用 sticky。即使写了 position: sticky; top: 0，浏览器解析阶段就跳过，computed 始终是 static。
- 必须显式设置
display: block、display: inline-block或display: table - 避免用
display: flex直接替换 inline 标签，容易破坏行内布局节奏 - inline-block 要注意
vertical-align默认是 baseline，建议统一设为top
真正卡住 sticky 的，往往不是你漏写了 top，而是某一层祖先悄悄锁死了滚动上下文——它不报错、不警告，只默默把 sticky 降级成 static。排查时别只盯着自己写的那行 CSS，得顺着 DOM 往上翻 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
