flex容器未设高度或祖先有overflow:hidden等会导致sticky失效，需设min-height、统一align-items、避免错误前缀及transform干扰。
Flex容器没设高度，sticky找不到滚动锚点
Flex容器默认不创建滚动上下文，哪怕子项撑高了，浏览器也可能无法识别出“可滚动区域”，sticky就失去触发依据。常见于display: flex的.container只写了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元素的顶部基准线
Flex子项用了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解析不稳定
Safari里-webkit-sticky顺序写错
Safari（尤其是iOS 15.4之前）要求-webkit-sticky必须写在position: sticky之前，否则忽略。现代浏览器已不需要前缀，但如果你的项目还兼容较老Safari，顺序错误就是硬伤。
错误写法：position: sticky; -webkit-position: sticky; → Safari直接跳过
- 正确顺序：
-webkit-position: sticky; position: sticky; - 同时补上
top: 0（Safari对阈值属性更敏感） - 避免在同一个规则里混用
transform或filter，它们会创建新层叠上下文，间接切断粘性链
overflow: hidden、一个align-items: center、甚至Safari里多一个换行，都可能让top: 0彻底失联。调试时别只盯着sticky元素自己，得顺着DOM往上摸三层——往往雷就埋在离你最远的那个div里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
