Flex容器中position: sticky失效主因有三：父容器未设min-height/max-height导致无滚动上下文；align-items/stretch或align-self拉偏top:0基准线；任意祖先存在overflow:hidden/auto/scroll或inline-flex，使sticky静默降级为static。
Flex容器里写position: sticky不生效，不是bug，是它根本没拿到合法的“粘附基准”——要么父容器没高度，要么对齐方式把top: 0算歪了，要么祖先偷偷加了overflow: hidden把它静默禁用。
Flex父容器没设min-height或max-height
Flex容器默认height: auto，如果内容没撑开它，实际高度可能为0。sticky元素连“粘在哪”都不知道，浏览器直接跳过粘性逻辑。
- 别用
height: 100vh——它锁死容器高度，滚动会跑到外层，sticky失去上下文 - 改用
min-height: 100vh，既保初始视口占满，又允许内容自然撑高 - 如果是局部滚动区（比如弹窗里的列表），必须配
max-height+overflow-y: auto，且确保子项总高度 >max-height - 临时验证：给父容器加
outline: 1px solid red，滚动时看它的实际高度是否变化
align-items或align-self拉偏了粘性基准线
Flex默认align-items: stretch，会让子项在交叉轴（垂直方向）被拉伸填满容器。这会导致top: 0对齐的不是容器顶部，而是被拉伸后“视觉中心”，看起来像没吸顶。
- 在sticky元素上加
align-self: flex-start，最直接可靠 - 或者统一设父容器
align-items: flex-start，但注意会影响其他子项 - 避开
align-items: center、baseline、flex-end——它们都会干扰粘性触发点 - 别用
margin-top或transform: translateY()手动调位置，这会覆盖sticky的计算逻辑
祖先元素有overflow: hidden或用了inline-flex
只要sticky元素向上任意一层祖先设置了overflow: hidden、auto或scroll，且该祖先不是滚动容器本身，sticky就会被截断并降级为static。另外，display: inline-flex根本不产生块格式化上下文（BFC），sticky从解析阶段就被忽略。
立即学习“前端免费学习笔记（深入）”；
- DevTools里选中sticky元素 → Computed → 点
position右侧的static链接 → 往上逐层查overflow-x/overflow-y值 - 临时加
overflow: visible !important到可疑祖先，立刻恢复就坐实问题 - 必须保留裁剪效果？用
clip-path: inset(0)替代overflow: hidden，不影响粘性链 - 确认父容器不是
inline-flex或inline-grid——这类inline级容器不生成BFC，sticky直接无效
最容易被忽略的是：问题往往不在sticky元素本身，而在它上面第三层那个带overflow: hidden的.card或.modal，或者父容器用了height: 100%却没给上级设高度——这种链式塌陷，靠单点调试很难一眼揪出。
