sticky在flex容器中退化为static是规范行为，因父容器computed height为0且无滚动上下文；需在其直接父元素设min-height: 100vh，并避免align-items: stretch及祖先overflow: hidden。
父容器是 display: flex 时 sticky 为什么直接退化为 static
不是浏览器 bug，也不是写漏了 top，而是规范行为：sticky 元素必须锚定在「有明确高度且可滚动的块级上下文」中，而默认的 display: flex 容器不自动提供这个上下文。一旦父容器 computed height 是 0px（DevTools Layout 面板可见），sticky 就连 top 值都不会读取，直接降级为 static。
flex 容器高度为 0 的典型成因
常见于布局循环塌陷场景：父容器 display: flex; flex-direction: column，子项用了 flex: 1，但父容器自身没任何高度约束（height、max-height 或 min-height）。子项依赖父高，父高又依赖子项撑开，结果就是 height 计算为 0。
- 用
outline: 1px solid red临时加在父容器上，一眼看出是否真有高度 - 不要改父容器本身，而是给它的**直接父元素**加
min-height: 100vh（不是height: 100vh） - 若在 Modal / Card 组件内，
min-height要加在.modal-content或.card上，而非.modal-body
align-items: stretch 干扰 sticky 顶部基准线
Flex 默认 align-items: stretch 会拉伸子项填满交叉轴，这导致浏览器把 top: 0 的参考点错当成容器中心线，而不是顶部边界。结果是元素看似“粘住”，实则静默降级为 relative，滚动时不动。
- 在 sticky 元素自身加
align-self: flex-start（推荐，不影响其他子项） - 或统一设父容器
align-items: flex-start，但需确认其他子项布局不受影响 - 禁用
align-items: center、baseline等值——它们同样偏移粘性起点 - 别用
margin-top或transform: translateY()手动调位置，会进一步混淆基准
祖先 overflow: hidden 是最隐蔽的失效原因
哪怕 sticky 元素离 overflow: hidden 隔了三层父级，只要其中任意一层计算后的 overflow-x 或 overflow-y 是 hidden、auto 或 scroll，sticky 就会被锚定到那一层；而如果该层本身没内容溢出，它就退化为 static——不报错、不警告，只悄悄失效。
- 用 DevTools → Computed → 点击
position: static右侧链接，逐级往上点 parentElement，盯紧每层的overflow-x和overflow-y - 常见“拦路虎”：
.ant-modal、.card、Tab 切换壳、router-view包装器 - 必须隐藏溢出时，优先用
clip-path: inset(0)替代overflow: hidden，它不影响 sticky 定位
top: 0 没写对，而是某个看不见的 overflow: hidden 藏在第三层父容器里，或者 min-height 被 height 覆盖了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
