sticky元素在flex容器中不吸顶，首要检查父容器是否具备可滚动高度：需设min-height（如100vh）、避免height:100%塌陷，并确认align-items未偏移基准线、祖先无overflow截断、display类型合规且为直系子级。
检查父容器是否具备可滚动高度
sticky 元素在 flex 容器中不吸顶，第一步要确认它的直接父容器有没有非零的、可溢出的高度。flex 容器默认 height: auto，若无内容撑开或未设约束，计算高度就是 0px——此时 sticky 直接退化为 position: static，连 top 值都不读。
常见错误写法包括：height: 100vh（锁死高度，内容超长时滚动发生在外层，sticky 失去锚定上下文）、height: 100%（链式塌陷）、或只写 display: flex 却没配任何高度约束。
- 优先用
min-height: 100vh替代height: 100vh - 局部滚动场景（如弹窗内列表）：给 flex 容器加
max-height: 400px+overflow-y: auto，并确保子内容总高度 >max-height - DevTools 中选中父容器 → Layout 面板 → 看 “Layout Bounds” 是否有实际高度区域；临时加
min-height: 1px可快速验证是否激活 sticky
验证 align-items 和 align-self 是否干扰基准线
flex 默认 align-items: stretch 会让子项在交叉轴（垂直方向）拉伸填满父容器，这会偏移 sticky 对“顶部边界”的计算基准——浏览器可能判定该元素始终在视口内，静默降级为 relative。
同理，align-items: center 或 baseline 会让 top: 0 实际对齐到容器中心线而非顶部，看起来像“没吸顶”，其实是粘错了位置。
- 给 sticky 元素自身加
align-self: flex-start（最稳妥，不影响兄弟项） - 若需统一左对齐，可设父容器
align-items: flex-start，但要确认其他子项布局不受影响 - 避免在 sticky 元素上使用
margin-top或transform: translateY()，它们会干扰 sticky 计算
排查祖先 overflow 是否截断滚动链
sticky 向上查找“最近可滚动祖先”，一旦遇到任意一层写了 overflow: hidden、auto 或 scroll，就会被锚定到那一层。但如果该层本身没溢出（比如高度刚好），sticky 就退化为 static——不报错、不警告，只悄悄失效。
典型“嫌疑层”包括：.ant-modal、.card、Tab 切换壳、router-view 包装器，甚至某些 CSS-in-JS 动态注入的 class。
- DevTools 选中 sticky 元素 → Computed → 点击
position右侧的static链接 → 往上逐层点parentElement，盯紧每层的overflow-x和overflow-y - 临时加
overflow: visible !important到疑似父级，若 sticky 恢复，就坐实是它的问题 - 不删
overflow: hidden的修复方式：clip-path: inset(0)替代裁剪，或加 wrapper：
确认 display 类型和层级关系是否合规
sticky 不支持写在 inline 元素（如 span、a）上，也不支持父容器是 inline-flex 或 inline-grid——它们不产生块格式化上下文（BFC），而 sticky 必须依赖 BFC 作为滚动参考。
另外，sticky 元素必须是可滚动祖先的**直系子级**。如果中间隔了 position: relative 但没设高度的 wrapper，或用了 display: contents，也会导致失效。
- 检查 sticky 元素的
display值：必须是block、inline-block、table等能触发 BFC 的类型 - 检查父容器
display：禁用inline-flex/inline-grid；若业务需要行内表现，把 sticky 元素提级到外层display: block容器中 - 确保 sticky 元素没被包裹在
float、position: absolute或transform非none的祖先里——这些都会创建新层叠上下文或破坏包含块
真正容易被忽略的是：这些条件往往叠加出现——比如一个 display: flex 的 .modal-body，既没设 min-height，又继承了 align-items: center，还嵌套在 overflow: hidden 的 .ant-modal 里。单点修复可能无效，得同步检查三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
