sticky元素在flex容器中不吸顶，是因为align-items: stretch拉伸子项干扰了sticky的视口判断，需设align-self: flex-start；父容器须有明确可滚动高度（如min-height: 100vh）；inline-flex因不触发bfc导致sticky失效；ios safari和微信小程序中水平sticky存在渲染限制。
flex容器里sticky元素不吸顶，是因为align-items: stretch在捣鬼
默认的 align-items: stretch 会让子项在交叉轴（垂直方向）上拉伸填满父容器高度，这直接干扰了浏览器对“sticky元素何时进入视口”的判断逻辑。它可能被算作“始终在视口内”，结果就是 position: sticky 静默退化为 position: relative，滚动时纹丝不动。
必须显式打破这个拉伸行为：
-
align-self: flex-start加在 sticky 元素自身上，最稳妥——它不会被兄弟元素的align-self: center覆盖 - 如果所有子项都需左对齐，也可设父容器
align-items: flex-start，但要注意这会影响其他子项布局 - 别用
align-items: baseline或center，它们同样破坏边界计算
父容器没高度，sticky就根本没边界可粘
flex 容器本身不自动产生滚动上下文，height: auto 且无内容撑开时，等效于 height: 0。sticky 元素连“粘在哪”都不知道，自然不生效。
必须给父容器一个明确的、可滚动的高度约束：
- 优先用
min-height: 100vh，而不是height: 100vh——后者会锁死容器高度，内容溢出时滚动发生在更外层，sticky 失去上下文 - 若容器是局部滚动区（如弹窗内列表），需设
max-height+overflow-y: auto，并确保子内容总高度 > max-height - 避免
height: 100%，它依赖父级高度，容易链式塌陷
父容器用了inline-flex，sticky直接被浏览器忽略
display: inline-flex 和 display: inline-grid 不产生块格式化上下文（BFC），而 sticky 定位必须依赖 BFC 作为滚动参考。这不是兼容性问题，是规范层面的禁止——浏览器解析阶段就跳过该声明，Computed 值永远是 static。
验证和修复很简单：
- DevTools 中检查 sticky 元素的 Computed
position，如果是static且你确认写了sticky，先查父容器 display 值 - 临时改成
display: flex（块级），看是否立刻生效 - 业务上真要保持行内表现？把 sticky 元素提级到外层
display: block容器中，别硬塞进 inline-flex 里
iOS Safari 和微信小程序里，left: 0 水平 sticky 基本靠不住
即使你满足所有条件，在 iOS Safari（尤其 15.4 之前）和微信小程序的 scroll-view 中，left: 0 或 right: 0 的水平 sticky 经常只在部分滚动帧生效，或完全不响应。这不是配置错，是渲染引擎限制。
绕过方案有限，但实操有效：
- 绝对不用
inline-flex——它不触发 BFC，sticky 直接禁用 -
min-height: 1px在旧版 Safari 中可能仍不足以激活 sticky 上下文，起手就写min-height: 40px兜底 - 水平吸附需求强烈时，降级用
position: fixed+ JS 监听scroll手动切换 class，虽然重，但稳
真正难的不是写对代码，是记住：sticky 不是“固定在视口”，而是“相对最近可滚动祖先，在到达偏移时停住”。一旦那个祖先不存在、不可滚动、或被 inline-flex/overflow/transform 破坏，它就只是个普通 relative 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
