sticky不起作用是因为浏览器未找到可滚动锚点容器；需确保父容器有非零可滚动高度、显式设置top等偏移值、无截断overflow、用min-height替代height，且避免inline-flex等不产生bfc的父级。
sticky 不起作用，不是 CSS 写错了，而是浏览器压根没找到可滚动的锚点容器——它需要一个有明确高度边界的父级来判断“粘住”范围。
父容器高度为 0 或 auto 且无约束
浏览器判定 position: sticky 是否生效的第一步，是检查其直接父容器是否有“可滚动的上下文”。这个上下文必须有非零、可溢出的高度。如果父容器 height 是 0px（比如纯文字流没撑开、flex: 1 但上层没设 height），它连滚动条都不会出现，sticky 就被跳过。
- 常见场景：
display: flex容器设了flex: 1，但html或body缺少height: 100%；display: contents父级不产生 BFC；inline-flex/inline-grid父级根本不支持 sticky - 验证方式：DevTools → Layout 面板 → 看父容器 “Layout Bounds” 是否有实际高度区域
- 临时验证：给父容器加
min-height: 1px—— 这不是 hack，是告诉浏览器“这里至少有一行空间可滚”
父容器用了 height: 100vh 却期望内容滚动
height: 100vh 会把容器物理锁死在视口高度，哪怕子内容撑到 500vh，容器也不会产生滚动条。浏览器判定“无需滚动”，sticky 就被静默忽略。
- ✅ 正确写法：
min-height: 100vh—— 保底视口高度，又允许内容自然撑高 - ❌ 错误组合：
max-height: 100vh+overflow-y: auto包裹sticky元素，会让它锚定在小滚动区内部，而非整页 - ⚠️ 注意：Grid/Flex 中兄弟项写了
height: 100%，可能挤压父容器高度计算
祖先元素设置了 overflow: hidden / auto / scroll
sticky 的定位参考系是“最近的可滚动祖先”。只要路径上任意一层写了 overflow: hidden、auto 或 scroll，这条链就被截断或重定向——哪怕该层当前根本没滚动条。
- 常见藏匿位置：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 壳、CSS-in-JS 动态注入的样式 - 临时排查：给某层父级加
overflow: visible !important，若sticky恢复，就坐实是它的问题 - 不删
overflow: hidden的替代方案：clip-path: inset(0)裁剪效果一致，但不创建新 BFC，sticky链保持完整
sticky 元素自身没设 top / bottom / left / right
CSS 规范明确要求：sticky 元素必须显式声明至少一个偏移属性，否则等价于 position: static。这个错误不会报错，只是完全不生效。
- 检查是否漏写，比如只写了
position: sticky却没跟top: 0 -
top: 0有效，top: 0px也有效，但top: auto无效 - 若用 CSS 自定义属性，确认变量已注入，例如
top: var(--sticky-top, 0)中--sticky-top不能未定义
真正容易被忽略的是：sticky 的失效往往不是单点问题，而是多个条件叠加——比如父容器 min-height: 100vh + 上层 overflow: hidden + inline-flex 父级，三者同时存在时，仅改其中一个几乎看不出变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
