最常见原因是未设置top等阈值，导致回退为relative；其次为祖先元素overflow:hidden/auto/scroll截断滚动上下文，使sticky退化为static，需逐级检查computed面板overflow值并用clip-path或position:relative wrapper修复。
为什么写了position: sticky却完全没反应
最常见原因是只写了position: sticky，没配top（或bottom/left/right）。浏览器直接回退为position: relative，毫无粘性行为。
top: 0是最稳妥的起点，表示元素顶部到达视口顶部时触发吸附；不能同时写top和bottom，部分浏览器会整条声明忽略。
打开 DevTools → Elements → Computed 面板，确认position最终值是不是sticky；如果不是，说明被祖先节点干扰了。
父容器overflow: hidden或auto导致失效
只要任意一层祖先（从 sticky 元素自身向上，直到body）设置了overflow: hidden、overflow: auto或overflow: scroll，且该祖先没设position: relative等定位，sticky 就会退化为static——滚动时完全不动，Computed 面板里看到的position就是static。
- 常见踩坑点：CSS 框架自带容器类（如
.ant-layout-sider）悄悄加了overflow: hidden - 弹窗内列表设了
overflow: auto，但没给其子容器加position: relative - 用了
overflow: clip（虽少见，但同样触发限制）
临时验证方式：给可疑父级加overflow: visible !important，如果吸顶恢复，就坐实是它的问题。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Flex/Grid 容器里align-items拉偏基准线
当 sticky 元素的直接父级是display: flex或display: grid，且设了align-items: center或justify-content: space-between，元素视觉位置会偏移，但top计算仍按原始文档流基准——结果就是“看着在顶部，实际没吸住”。
解决方法：
- 给 sticky 元素显式加
align-self: flex-start（Flex）或justify-self: start（Grid） - 避免父容器用
align-items: stretch却不设min-height，否则高度计算异常 - 别把 sticky 元素塞进
flex-direction: column-reverse容器——规范未定义反向流下的行为
iOS Safari 和旧 WebView 的兼容性陷阱
position: sticky在 Safari 15.4 之前存在严重 bug：父容器有transform或perspective时，sticky 元素会完全失效；旧版 Android WebView（尤其 4.4–6.x）根本不识别该属性。
更隐蔽的是 iOS Safari 15.2–15.3：吸顶错位、卡顿、触发后无法恢复。仅靠@supports (position: sticky)检测无法识别该问题。
真正难的不是写那行position: sticky，而是判断它在哪一层父容器里被悄悄截断了；很多时候问题不在元素本身，而在它上面第三层的overflow: hidden容器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
