sticky失效的根本原因是父容器高度为0且align-items: stretch干扰定位基准，需在flex容器的直接父元素设min-height: 100vh、sticky元素自身加align-self: flex-start，并排除祖先overflow截断。
根本原因不是浏览器 bug，而是 sticky 元素的直接父容器既没高度、又被 align-items: stretch 拉伸干扰了定位基准——它连“粘在哪”都不知道，自然不生效。
父容器高度为 0，sticky 直接退化为 static
Flex 容器默认不设高度，height: auto 且无内容撑开时，计算出的高度就是 0px。sticky 的第一步是检查直接父容器的 computed height 是否 > 0；若为 0，浏览器连 top 值都不读，直接当 position: static 处理。
- 别给 flex 容器自己设
height: 100vh——它锁死高度，内容超长时滚动发生在外层，sticky 失去锚定上下文 - 正确做法：在 flex 容器的**直接父元素**上加
min-height: 100vh（比如.layout或.app） - 局部滚动场景（如弹窗内列表）：给 flex 容器设
max-height: 400px+overflow-y: auto，并确保子内容总高度 > max-height
align-items: stretch 拉伸子项，破坏 sticky 的视口判断
Flex 默认 align-items: stretch 会让子项在交叉轴（垂直方向）拉伸填满父容器，这会偏移 sticky 对“顶部边界”的计算基准——浏览器可能判定该元素始终在视口内，于是静默降级为 relative。
- 最稳妥解法：在 sticky 元素自身加
align-self: flex-start（不影响其他子项） - 若需统一左对齐，可设父容器
align-items: flex-start，但要确认其他子项布局不受影响 - 禁用
align-items: center、baseline、stretch等值——它们都会让 top: 0 实际对齐到容器中心线而非顶部
祖先元素 overflow: hidden/auto/scroll 截断滚动链
sticky 向上查找“最近可滚动祖先”，一旦遇到任意一层写了 overflow: hidden、auto 或 scroll，就会被锚定到那一层。但如果该层本身没溢出（比如高度刚好），sticky 就退化为 static——不报错、不警告，只悄悄失效。
- 常见“嫌疑层”：
.ant-modal、.card、Tab 切换壳、router-view包装器 - 快速验证：DevTools 选中 sticky 元素 → Computed → 点击
position右侧的static链接 → 往上逐层点 parentElement，盯紧每层的overflow-x和overflow-y - 修复方式不是删
overflow，而是加 wrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>
真正容易被忽略的是：这些条件往往叠加出现——比如一个 display: flex 的 .modal-body，既没设 min-height，又继承了 align-items: stretch，还被外层 .ant-modal 的 overflow: hidden 截断。单独修一个，问题还在。必须同步检查高度、对齐、overflow 三层约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
