Flex容器未设高度或祖先有overflow:hidden会导致sticky失效；需设min-height、避免align-self偏移、显式声明top等阈值，并排查iOS兼容性及隐藏的overflow祖先。
Flex容器没设高度，sticky找不到滚动锚点
Flex容器默认不创建滚动上下文，哪怕子项内容撑高了，浏览器也可能无法识别出“可滚动区域”，position: sticky就失去触发依据。常见于只写了display: flex和flex-direction: column，却没配height、min-height或max-height。
临时验证方法：给Flex父容器加outline: 1px solid red，滚动时看它的实际高度是否随内容扩展；若始终卡在视口高度，说明它被截断了。
- 把
height: 100vh改成min-height: 100vh，允许内容自然撑高 - 若需严格控制高度，用
max-height: 100vh配合overflow-y: auto显式声明滚动容器 - 避免仅靠
align-items: center或baseline布局——它们会偏移sticky元素的顶部基准线
align-self拉偏了粘性基准线
Flex子项用了align-self: center或flex-end，会让sticky元素在交叉轴上居中或靠底，导致top: 0实际对齐的是容器中心线而非顶部边界——看起来像“没吸顶”，其实是粘错了位置。
这种情况在移动端或响应式设计里特别隐蔽，因为不同屏幕尺寸下align-self的视觉偏移量会变化。
- 给sticky子项显式加
align-self: flex-start - 或在Flex父容器上统一设
align-items: flex-start - 不要依赖
margin-top或transform: translateY()去“手动调位置”，这会干扰sticky计算
祖先元素overflow:hidden静默降级为static
Flex容器本身没问题，但它的某层祖先（比如.ant-modal、.card、Tab切换壳）带了overflow: hidden，浏览器直接把sticky元素降级成position: static——你在Styles面板还能看到position: sticky，但Computed里已经是static。
DevTools里快速定位：选中sticky元素 → Computed → 点position右侧的static链接 → 往上逐层点parentElement，盯紧每层的overflow-x和overflow-y值。
- 临时加
overflow: visible !important到可疑祖先，sticky立刻恢复就坐实问题 - 业务必须保留裁剪效果？用
clip-path: inset(0)替代overflow: hidden，视觉一致且不破坏粘性链 - 别写
clip-path: inset(0px)，旧版Safari解析不稳定
缺少top/bottom等阈值属性
position: sticky必须配合top、right、bottom或left至少一个阈值属性使用。只写position: sticky而不指定具体位置是无效的。
错误写法：.sticky-element { position: sticky; } → 浏览器当relative处理，完全不触发粘性行为。
- 正确写法必须含至少一个偏移值，例如
top: 0、top: 20px、bottom: 10px -
top和bottom同时设置时，top优先级更高；left和right同理，left生效 - 注意iOS Safari（尤其是15.4之前）要求
-webkit-sticky必须写在position: sticky之前，否则忽略
真正容易被忽略的，是那个“看不见”的祖先overflow——它可能藏在Modal、Card或第三方组件壳子里，不翻Computed面板根本看不到。而align-self带来的基准偏移，在小屏下才暴露，上线后才被用户截图反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
