position: sticky 失效主因是父容器无滚动能力：computed height 为 0 或祖先存在 overflow 截断，且 sticky 元素必须声明 top/bottom/left/right 偏移值。
父元素必须有非零可滚动高度，且不能截断滚动链 —— 否则 position: sticky 直接退化为 position: static，连 top 值都不生效。
父容器 computed height 为 0 是硬性失效条件
浏览器第一步就检查直接父容器的 Layout Bounds 高度。如果 DevTools Layout 面板显示 height 是 0px，sticky 完全不启动，不是“没效果”，而是被跳过。
-
display: flex或display: grid容器里写了flex: 1，但上层（如html、body）没设height: 100%或min-height: 100vh -
display: contents父级不产生 BFC，无法提供滚动上下文 - 纯文字流内容太少，又没设
min-height或撑高手段 - 临时验证：加
min-height: 1px—— 这不是 hack，是明确告诉浏览器“这里可以滚”
height: 100vh 会锁死滚动，必须用 min-height
height: 100vh 把容器物理固定在视口高度，哪怕子内容总高 3000px，它也不会溢出、不出现滚动条，sticky 失去触发前提。
- ✅ 正确写法：
min-height: 100vh—— 保底视口高度，又允许内容自然撑高 - ❌ 错误组合：
max-height: 100vh+overflow-y: auto包裹 sticky 元素，会让它锚定在小滚动区内部，而非整页 - ⚠️ Flex/Grid 中兄弟项写了
height: 100%，可能挤压父容器高度计算，导致 computed height 为 0
祖先 overflow 会静默截断 sticky 滚动链
sticky 向上查找“最近可滚动祖先”，一旦遇到任意一层写了 overflow: hidden、overflow: auto 或 overflow: scroll，就立刻被锚定到那一层 —— 即使该层当前根本没滚动条。
- DevTools 里
computed position显示为static，基本就是这个原因 -
overflow: clip同样会截断（Chrome 90+ 支持，行为等同hidden） - 用
border: 1px solid red快速确认容器是否真有滚动能力，比猜更直接
sticky 元素自身必须声明至少一个偏移值
CSS 规范强制要求：没写 top、bottom、left 或 right 中的任一值，position: sticky 就等价于 position: static。这个错误不会报错，只是完全不生效。
-
top: 0有效，top: 0px也有效，但top: auto无效 - 常见漏写：只写了
position: sticky，却忘了跟top: 0 - 注意 Safari 对
contain: layout style paint的限制，可能禁用 sticky 行为
最容易被忽略的是：sticky 不是“设了就粘”，它依赖父容器真实存在的滚动能力。Layout 面板里看不到高度区域，就别调 top 值 —— 先让父容器有 height，再谈粘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
