sticky不吸顶是因为父容器高度为0，导致其退化为static；常见于无高度约束的flex容器，需在直接父元素设min-height: 100vh，并避免align-items: stretch、overflow: hidden及固定高度等干扰因素。
sticky在flex容器里不吸顶，是因为父容器高度为0
Flex容器默认不产生可滚动上下文，position: sticky第一步就检查直接父容器的computed height是否大于0。如果DevTools Layout面板显示父容器高度是0px，sticky直接退化为static，连top值都不会读——不是bug，是规范行为。
常见于Bootstrap的.d-flex或纯display: flex容器：它只启用弹性布局，但不提供高度约束，子项flex: 1又反过来依赖父容器给高度，形成循环塌陷。
- 给flex容器的直接父元素加
min-height: 100vh（不是flex容器自己） - 避免
height: 100vh——它锁死高度，内容超长时滚动发生在外层，sticky失去锚定上下文 - 临时加
outline: 1px solid red快速验证容器是否真有高度 - 在Modal、Card等组件内用flex时，
min-height要加在.modal-content或.card上，而非.modal-body或.card-body
align-items: stretch会让sticky元素“粘错位置”
Flex默认align-items: stretch会拉伸子项填满交叉轴，这干扰了sticky对“视口顶部”的判断逻辑。浏览器可能认为该元素始终在视口内，于是静默降级为relative，滚动时纹丝不动。
这不是兼容性问题，而是计算基准被偏移：top: 0实际对齐的是容器中心线，而非顶部边界。
- 在sticky元素自身加
align-self: flex-start（最稳妥，不影响其他子项） - 或统一设父容器
align-items: flex-start，但需确认其他子项布局不受影响 - 禁用
align-items: center、baseline等值，它们同样破坏粘性起点计算 - 别用
margin-top或transform: translateY()手动调位置——这会进一步混淆sticky的定位基准
祖先元素overflow: hidden会静默截断滚动链
sticky向上查找“最近可滚动祖先”，一旦遇到任意一层写了overflow: hidden、auto或scroll，就会被锚定到那一层。但如果该层本身没溢出（比如高度刚好、内容没撑开），sticky就退化为static——你在Styles里还能看到position: sticky，但Computed里已是static。
这种失效非常隐蔽：它不报错、不警告，只悄悄失效。
- 用DevTools选中sticky元素 → Computed → 点击
position右侧的static链接 → 往上逐层点parentElement，盯紧每层的overflow-x和overflow-y - 常见“嫌疑层”：
.ant-modal、.card、Tab切换壳、router-view包装器 - 修复方式不是删
overflow，而是把触发BFC的那层换成contain: layout或改用flow-root -
transform、filter、will-change也会创建新层叠上下文，让sticky脱离预期容器，需逐层排查
动态内容插入后sticky跳动，本质是高度反复坍缩
JS插入新DOM后，若父容器高度因浮动塌陷、flex未设align-items或overflow: hidden被重算，浏览器就得每帧重估sticky边界，导致卡顿或“啪”一下掉下去。
这不是sticky变慢，是布局系统被迫反复重排。
- 给sticky元素自身加
contain: layout style paint（三个值缺一不可） - 禁用
height: 100vh或height: 600px等固定高度，改用min-height+padding-bottom缓冲 -
padding-bottom值建议≥sticky元素自身高度，且配box-sizing: border-box - 若用IntersectionObserver替代scroll监听，可避免频繁触发重排
position: sticky，而是它背后那条脆弱的滚动链——任何一层的高度缺失、溢出截断或层叠干扰，都会让它无声失效。调试时盯着Layout面板的高度数字，比盯着CSS声明有用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
