flex容器中position: sticky失效，主因是父容器未提供滚动上下文：缺高度约束、align-items: stretch强制填满、display: inline-flex不创建bfc、overflow: hidden截断定位流。
Flex容器里写position: sticky却没反应，大概率不是你漏写了top，而是Flex父容器本身没提供sticky能识别的“滚动上下文”——它既没高度约束，又默认拉伸子项，浏览器直接跳过粘性逻辑。
为什么align-items: stretch会让sticky失效
Flex容器默认align-items: stretch，会强制子元素在交叉轴（垂直方向）上填满父容器高度。这导致sticky元素被算作“始终在视口内”，浏览器判定无需触发粘性行为，直接退化为position: static或relative。
- 在sticky元素自身加
align-self: flex-start，比改父容器更安全，不影响其他子项 - 避免
align-items: center、baseline或stretch——它们都会干扰top基准线的计算 - DevTools里检查computed
position值，如果是static，基本可确认是这个原因
display: inline-flex会让sticky彻底被忽略
浏览器规范明确要求sticky必须依赖块格式化上下文（BFC），而display: inline-flex和display: inline-grid不创建BFC，解析阶段就丢弃position: sticky声明。
- 用DevTools查父容器的
display计算值，如果是inline-flex，立刻改成flex - 临时验证：在Elements面板里右键父容器 → Edit as HTML → 改
style="display: flex"，看sticky是否秒恢复 - 业务上真要保持行内布局？把sticky元素提级到外层
display: block容器中，别硬塞进inline-flex
Flex父容器没高度，sticky连锚点都没有
Flex容器height: auto且无内容撑开时，等效于height: 0。sticky需要一个有明确边界的包含块来判断“何时进入视口”，没高度就等于没边界。
- 优先用
min-height: 100vh，不是height: 100vh——后者锁死高度，内容溢出后滚动发生在外层，sticky失去上下文 - 如果是局部滚动区（如弹窗内列表），设
max-height: 500px+overflow-y: auto，并确保子内容总高度 >max-height - 禁用
height: 100%，它依赖父级高度，容易链式塌陷，最终让容器高度为0
overflow + Flex组合是双重陷阱
当Flex父容器同时设了overflow: hidden（哪怕只为清除浮动或裁剪圆角），sticky会因滚动上下文被截断而失效。这不是bug，是规范行为：overflow属性会阻断sticky定位流在Flex容器内的传播。
- 临时验证：在DevTools里给该Flex容器加
overflow: visible !important，如果sticky立刻恢复，问题坐实 - 修复方案一：套一层
div，外层设overflow: hidden，内层加position: relative，sticky元素挂在这层下面 - 修复方案二：用
clip-path: inset(0)替代overflow: hidden，视觉效果一致，且不干扰sticky定位流（Safari 15.4+、Chrome 93+已全覆盖）
最常被忽略的是：sticky失效时，top值本身不会报错，DevTools里样式声明也正常显示，但computed position早已变成static——这意味着浏览器压根没启动粘性逻辑，所有后续调试都该从祖先容器的display、height、overflow、align-items四个属性切入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
