绝大多数position: sticky失效是因祖先元素overflow:hidden/auto/scroll静默降级为static；需逐级检查computed面板overflow值，用clip-path:inset(0)替代或前置-webkit-sticky修复兼容性。
绝大多数 position: sticky 失效，不是浏览器不支持，而是被某层祖先的 overflow: hidden、overflow: auto 或 overflow: scroll 静默降级为 static——你看到的“不动”，其实是计算后直接变成 position: static。
检查祖先元素的 computed overflow 值
DevTools 的「Styles」面板显示 position: sticky，不代表它真在生效；关键看「Computed」面板里 position 是否还是 sticky。如果已是 static，说明粘性链已被截断。
- 从 sticky 元素开始，在 Elements 面板中逐级点击右侧的
parentElement链接，直到html或body - 每跳一层，都在「Computed」里查
overflow-x和overflow-y的最终计算值 - 特别注意框架组件：Ant Design 的
.ant-modal、Vant 的.van-card、Swiper 的根节点，常默认注入overflow: hidden - 临时删掉可疑祖先的
overflow声明（或加overflow: visible !important），观察 sticky 是否立刻恢复
用 clip-path: inset(0) 替代 overflow: hidden
很多场景下 overflow: hidden 是业务必需（如裁剪圆角图片、约束弹窗尺寸），硬删会破坏 UI。这时不能靠“调顺序”或“加 height”，必须绕过限制。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
clip-path: inset(0)视觉效果等同于overflow: hidden，但不创建新块格式化上下文（BFC），不影响 sticky 的包含块计算 - 兼容性比
overflow: clip更好：clip-path在 Firefox 97 以下、Safari 15.4 以下也有效 - 写法简单：
div { clip-path: inset(0); }，可直接替换原有overflow: hidden
修复 iOS Safari 15.4 及更早版本的前缀问题
iOS Safari 15.4 及更早版本完全不识别 position: sticky，只认 position: -webkit-sticky，且顺序写错整条规则会被丢弃。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 不能写成
-webkit-position: sticky（属性名不存在） - PostCSS autoprefixer 需明确配置目标：
ios_saf ，否则不会插入前缀 - 用 JS 检测是否生效：
CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')，别依赖@supports (position: sticky)
避免父容器高度或 display 类型干扰
sticky 元素挂在 flex 或 grid 容器下时，若该容器没显式高度、或被 overflow / transform 干扰，也会失效。
- 给 flex/grid 父容器加
min-height: 100vh（不是height: 100vh），否则内容撑高后粘性范围被截断 - 避免直接子元素是
transform元素：iOS Safari 15.4 前不支持嵌套在transform内的 sticky - 若父容器设了
overflow: auto且必须保留，给 sticky 元素包一层position: relativewrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>
真正难的不是补前缀或改高度，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
