ios safari 15.4及更早版本只识别position: -webkit-sticky且必须置于position: sticky之前，顺序错误会导致整行被丢弃，computed中position显示为static；同时祖先元素overflow:hidden/auto/scroll会静默禁用sticky。
为什么 iOS Safari 里 position: sticky 显示为 static
不是写错了，是浏览器压根没解析那行 CSS。iOS Safari 15.4 及更早版本只认 position: -webkit-sticky，且必须写在 position: sticky 前面；顺序反了，整行被丢弃，computed 样式里 position 就是 static。
PostCSS autoprefixer 必须配 ios_saf 才会插前缀；如果没配，或配成 <code>ios_saf >= 16，-webkit-sticky 就不会生成。
- 检查 DevTools 的 Computed 面板，确认
position值是不是static - 逐行看 Elements 面板里的 Styles，确认
position: -webkit-sticky是否真实存在、是否被覆盖 - 别用
@supports (position: sticky)检测——它在旧版 Safari 返回false，但你仍需提供-webkit-版本
祖先 overflow 是静默杀手
只要任意祖先（不一定是父级）设了 overflow: hidden、auto 或 scroll，且该容器实际不可滚动（比如高度固定但内容很短），iOS Safari 就会直接把 sticky 元素降级为 static，不报错、不警告。
常见藏雷位置包括：ant-modal-body、van-card、微信小程序的 scroll-view、甚至某行被遗忘的 CSS-in-JS 注入样式。
- 用 DevTools 从 sticky 元素开始，逐级点开 parent，查每层的
overflow-x和overflow-y - 临时加
overflow: visible !important到某层，sticky 恢复了，就定位准了 - 不能删
overflow？改用clip-path: inset(0)替代，视觉效果一致，但不干扰 sticky
表格和 flex/grid 容器里 sticky 更难生效
表格要冻结首列+表头，table-layout: fixed 是硬门槛；flex 或 grid 容器默认不创建滚动上下文，Safari 要求必须显式设 height 或 max-height + overflow-y: auto，且不能用 inline-flex。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
移动端局部滚动容器（如弹窗内 div）常声明 overflow: auto 却没撑高内容，Safari 就当它不可滚动，sticky 直接退化。
<table> 必须加 <code>table-layout: fixed和width: 100%，所有<th>/<code><td> 得有 <code>min-width或width- flex 容器加
flex-direction: column+overflow-y: auto+max-height: 500px（不能只靠min-height） - 避免在滚动区父级上用
transform、filter、will-change——它们创建新层叠上下文，sticky 参考系错乱 - 检查 computed 样式中
position是不是sticky，还是已变成static - 旧系统 fallback 方案不是降级为
fixed，而是用transform: translateY()+IntersectionObserver手动模拟 - 别碰
-webkit-overflow-scrolling: touch——已废弃，残留反而干扰 sticky 行为
bottom: 0 在旧 iOS 上根本无效
iOS Safari 直到 15.4 才稳定支持 bottom: 0，之前版本直接忽略。给底部导航栏加 position: sticky; bottom: 0，在真机上就是白写。
而且 sticky 本身只对单方向生效，必须依赖明确的滚动容器：body 默认不滚动，得用 main 包裹内容并设 height: calc(100vh - 导航高度) + overflow-y: auto，导航栏放在同级、不嵌套在滚动容器内。
真正难的从来不是写对 top: 0，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper。它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
