position: sticky 失效主因是祖先元素 overflow 为 hidden/auto/scroll 或 height: 100vh 截断滚动，应逐层检查 computed overflow 并用 clip-path: inset(0) 替代 overflow: hidden、改 height 为 min-height: 100vh。
检查祖先元素的overflow计算值是否为hidden/auto/scroll
绝大多数 position: sticky 失效，不是写错了 top，而是某个祖先元素（哪怕隔了三层）的 overflow-x 或 overflow-y 计算值为 hidden、auto 或 scroll，浏览器会静默将其降级为 position: static。
常见藏雷位置包括：.ant-modal、.swipe-wrapper、.card、Tab 切换容器、CSS-in-JS 注入的内联样式。它们常默认加 overflow: hidden 防内容穿出或保圆角，却顺手废掉子级 sticky。
- 用 DevTools 选中 sticky 元素 → 切到「Computed」面板 → 找
overflow-x和overflow-y值 - 点击右侧「parentElement」链接逐层上溯，直到
html或body，记下每一层的计算值 - 临时删掉可疑祖先的
overflow声明（或加overflow: visible !important），看 sticky 是否立刻恢复
用clip-path: inset(0)替代overflow: hidden
很多场景下 overflow: hidden 是业务必需：裁剪圆角图片、约束卡片尺寸、防止弹窗内容溢出。硬删会破坏 UI，必须绕过限制。
clip-path: inset(0) 能实现完全相同的视觉裁剪效果，但不创建新块格式化上下文（BFC），也不干扰 sticky 的锚定链——它是目前最轻量、兼容性最好的替代方案。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 支持 Safari 13.4+、iOS Safari 13.4+，2026 年已无兼容顾虑
- 不要写成
clip-path: inset(0px)（带单位），旧版 Safari 解析不稳定 - 若祖先同时有
border-radius，仅替换overflow即可，border-radius仍生效
父容器高度设为min-height而非height
当 sticky 元素的包含块被设为 height: 100vh，它会硬性截断滚动范围。即使子内容撑高，父容器也不会扩展，导致 sticky 在滚动超出视口后“消失”——实际是粘性作用域被截断了。
根本问题在于：sticky 只在其包含块的滚动范围内有效；height: 100vh 让容器失去随内容伸展的能力，浏览器无法识别完整滚动上下文。
- 将
height: 100vh改为min-height: 100vh - 确保该容器未被其他规则（如
max-height、flex: 1且父级无高度）意外压缩 - 若父容器是
display: flex或grid，需额外确认其是否具备明确高度或最小高度（如min-height: 1px）
避免sticky元素直接挂在flex/grid父容器里
当 sticky 元素的**直接父容器**是 display: flex 或 display: grid，且该容器没设显式高度、或用了 align-items: center 等居中属性时，sticky 的 top 基准线会被拉偏，或因容器未形成有效滚动上下文而失效。
更隐蔽的是：display: inline-flex 或 inline-grid 根本不产生块格式化上下文（BFC），sticky 直接被忽略。
- 给 flex/grid 父容器加
min-height: 1px或height: 0，强制生成包含块 - 避免在该父容器上同时设置
overflow: hidden—— 这会叠加触发双重拦截 - 若父容器需横向滚动（如表格），优先把 sticky 元素提到更高层级，而不是塞进
overflow: auto内部
overflow: hidden，或一个 height: 100vh 把滚动上下文锁死了。排查时别只盯直接父级，要一路点到 body；修复时也别硬删样式，clip-path: inset(0) 和 min-height 是最稳的两个支点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
