flex容器未设可滚动高度或align-items/stretch会破坏sticky定位；需用min-height:100vh、局部max-height+overflow-y:auto、align-self:flex-start，并避免overflow:hidden/transform/inline-flex等降级因素。
Flex容器没设可滚动高度，sticky找不到锚点
sticky不是“吸顶”，而是“在某个滚动容器内相对定位”。Flex容器默认height: auto，如果没显式给高度约束，它可能等效于height: 0——子元素再高也撑不开滚动上下文，sticky就彻底失去触发条件。
常见错误写法：height: 100vh。它把容器锁死在视口高度，内容溢出时滚动发生在外层（比如body），sticky元素挂在Flex里，却跟着body滚动，看起来像“吸顶后突然掉下去”。
- ✅ 改用
min-height: 100vh：保证初始不低于视口，又允许内容自然撑高 - ✅ 局部滚动区（如弹窗内列表）要配
max-height: 600px; overflow-y: auto，且确保子项总高度 >max-height - ❌ 避免
height: 100%：依赖父级高度，容易链式塌陷
align-items/stretch干扰sticky的顶部基准线
Flex容器默认align-items: stretch，会让子项在交叉轴（垂直方向）拉伸填满容器高度。这会破坏浏览器对“元素何时进入视口”的判断逻辑，导致position: sticky静默退化为position: relative。
更隐蔽的是align-items: center或baseline——它们让元素视觉居中，但top: 0仍按原始文档流顶部计算，结果就是“粘在了容器中间”，而不是顶部。
- ✅ 给sticky元素加
align-self: flex-start（最稳妥，不干扰兄弟项） - ✅ 或统一设父容器
align-items: flex-start，但需确认其他子项布局不受影响 - ❌ 不要用
margin-top或transform: translateY()手动调位置，会干扰sticky计算
祖先元素overflow:hidden或transform强制降级为static
只要任意一层祖先（从sticky元素向上直到body）设置了overflow: hidden、auto或scroll，且该祖先**不是sticky元素的最近定位上下文**（即没设position: relative等），sticky就会被浏览器直接降级为position: static。
DevTools里验证方法：选中sticky元素 → Computed → 点position右侧的static链接 → 往上逐层点parentElement，盯紧每层的overflow-x和overflow-y值。
- ✅ 临时删掉可疑父级的
overflow声明，看是否恢复 - ✅ 若必须保留
overflow: auto（如弹窗内列表），加一层position: relativewrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>
- ✅ 检查是否被
transform、filter、will-change等创建新层叠上下文的样式影响
display: inline-flex或inline-grid直接忽略sticky声明
display: inline-flex和display: inline-grid不触发块格式化上下文（BFC），而sticky定位规范明确要求依赖BFC作为滚动参考。这不是兼容性问题，是浏览器解析阶段就跳过该声明——Computed里永远显示static。
即使你写了position: sticky; top: 0，它也不会生效，连报错都不会有。
- ✅ 把
display: inline-flex改成display: flex - ✅ 或在外层包一个
display: block容器，让sticky元素挂在块级上下文中 - ❌ 不要指望通过
vertical-align或line-height补救，无效
overflow: hidden和align-self的组合效应：前者让sticky静默失效，后者让失效表现得像“粘错了位置”，排查时容易来回摇摆。建议先用DevTools锁定computed position，再逐层确认overflow和对齐行为。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
