sticky在flex/grid中失效主因是父容器未形成滚动上下文：flex/grid容器缺高度约束、inline-flex/inline-grid不支持、align-items偏移基准线、祖先overflow截断均会导致降级为static。
sticky 在 flex/grid 容器里失效，不是写错了 top，而是容器没生成有效的滚动上下文；在 inline-flex/inline-grid 里则直接被浏览器忽略——它压根不进 sticky 计算流程。
flex 或 grid 父容器未设高度约束
sticky 元素挂在 display: flex 或 display: grid 的子级下时，若该容器自身没有显式高度（如 height、max-height 或 flex: 1 配合父级高度），浏览器无法确定“可滚动区域”，sticky 就会退化为 static。
- 检查父容器的 computed
height和max-height：如果都是auto且内容未撑高，sticky 几乎必挂 - 临时加
min-height: 1px或height: 0+flex: 1可快速验证是否恢复 - 避免只写
flex: 1却漏掉其父级的height: 100vh或min-height: 100vh—— Flex 链断裂，sticky 就断电
inline-flex / inline-grid 父容器完全不支持 sticky
display: inline-flex 和 display: inline-grid 不产生块格式化上下文（BFC），而 sticky 定位必须依赖 BFC 作为锚定边界。浏览器解析阶段就跳过它，computed position 永远是 static。
- DevTools 里看到
position: sticky声明还在，但Computed面板里就是static，这是最典型信号 - 不能靠
!important或重写顺序修复，必须改父容器为display: flex或display: grid - 业务上需要“行内排列”效果？用
display: flex+flex-direction: row+align-items: flex-start替代，别硬塞 inline 变体
flex 对齐方式偏移 sticky 基准线
当父容器是 display: flex 且设置了 align-items: center、baseline 或 stretch，sticky 元素的“顶部”基准线会被拉高或压低，导致 top: 0 实际对不准滚动容器顶部。
- 现象：元素滚动到一半突然“弹回”文档流位置，或始终悬在中间不吸顶
- 优先用
align-items: flex-start，它让子项顶部对齐容器顶部，和 sticky 的计算逻辑一致 - 慎用
height: 100vh：它锁死容器高度，内容撑高后超出部分不再属于 sticky 作用域；换成min-height: 100vh更安全
滚动容器被 overflow 截断，sticky 被困在子区域
即使父容器是合法的 flex/grid，只要它的某个祖先（哪怕隔了三层）设置了 overflow: hidden、auto 或 scroll，且该祖先自身不可滚动（比如高度刚好、无溢出），sticky 就会被强制降级为 static —— 这不是 bug，是规范行为。
- 用 DevTools 逐级点开 sticky 元素的每个父节点，在
Computed面板查overflow-x和overflow-y的最终值，重点盯hidden - 临时加
overflow: visible !important到可疑祖先，如果 sticky 立刻恢复，问题就坐实了 - 不能删
overflow: hidden？改用clip-path: inset(0)，它裁剪视觉但不创建新 BFC，sticky 链保持完整
真正难排查的不是 sticky 写得对不对，而是哪个祖先悄悄关掉了它的“电源开关”。overflow、display 类型、height 约束、transform 干扰——它们从不同路径切断粘性链，且往往同时存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
