uni-app H5端position: fixed在iOS手机上“不固定”的根本原因是iOS Safari将fixed定位解析为相对于最近可滚动祖先而非视口，且父元素含transform/opacity等属性会创建新包含块使其退化为absolute；解决方案包括Teleport挂载到body、避免scroll-view内使用fixed、软键盘弹出时动态切换为absolute定位。
为什么uni-app H5端的position: fixed在手机上突然“不固定”了
根本原因不是uni-app本身的问题，而是移动端浏览器（尤其是iOS Safari）对position: fixed的实现机制和CSS规范共同作用的结果。它**不是相对于视口，而是相对于最近的可滚动祖先容器**；一旦父级有transform、filter、perspective或will-change（哪怕值是translateZ(0)或blur(0)），就会创建新包含块，让fixed退化为absolute——看起来就是“跟着滚”“偏移”“遮不住全屏”。
怎么快速定位是哪个父元素在“搞破坏”
别猜，用开发者工具逐层检查：
- 选中失效的
fixed元素，在Elements面板按住Shift连续点右上角箭头，逐级跳到父节点 - 每跳一层，切到Computed标签页，搜索
transform、filter、backdrop-filter、will-change - 重点盯
transform: translateZ(0)——它没动画面，但已创建新定位上下文 - 顺手看
opacity是否小于1（某些UI库会默认设opacity: .99来抗锯齿，也会触发）
uni-app跨端真正可用的3种解法
单纯加!important或transform: none只是临时掩盖，真要稳定得从结构或机制入手：
-
H5端优先用
Teleport挂到<body>下：Vue3中直接<teleport to="body"><your-modal></teleport>，绕过所有父级样式干扰 -
小程序端用
root-portal或自定义cover-view包裹：避免被scroll-view等滚动容器“截胡”，尤其不能放在scroll-view内部 -
App端（iOS）慎用
fixed，改用position: absolute+ 动态计算top：软键盘弹出时fixed大概率失效，监听focus/blur事件切换定位方式更稳
uni-app里容易被忽略的平台差异细节
--window-top变量只在App和微信小程序生效，H5端拿不到；uni.getSystemInfoSync().platform === 'h5'判断后，H5必须走DOM级方案（如Teleport或document.body.appendChild），不能依赖CSS变量。另外，iOS下scroll-view自带滚动层，只要fixed元素在它里面，就必然失效——这个限制比CSS规范还硬，删样式也救不回来。
立即学习“前端免费学习笔记（深入）”；
