H5移动端fixed定位“失效”实为被降级为absolute：当祖先元素含transform/filter/overflow:hidden等时，浏览器创建新定位上下文，使fixed元素脱离视口而相对该祖先定位，导致滚动错位、键盘上移、z-index失效。
为什么H5端移动端 fixed 定位会“失效”
不是 CSS 没生效，而是 position: fixed 在 iOS Safari 和部分安卓 WebView 中被降级为 position: absolute 行为——尤其当父容器含 transform、filter、perspective 或 overflow: hidden 时。浏览器会隐式创建新的层叠上下文或定位上下文，导致 fixed 元素脱离视口，转而相对于最近的“定位上下文”定位。
典型现象：底部按钮随页面滚动、顶部导航栏在软键盘弹出后上移、z-index 失效被原生组件（如 <video></video>）遮挡。
- 检查是否对 fixed 元素或其任意祖先设置了
transform: translateX(0)等 —— 即使是transform: translateZ(0)也会触发该问题 - iOS 下软键盘弹出时，
window.innerHeight会突变，但 fixed 元素未重绘，造成视觉错位 - H5 端默认启用
<style scoped></style>，但某些插件或第三方组件未适配深度选择器，导致样式未穿透到子节点
如何让 fixed 在 H5 移动端真正“固定”
核心思路：绕过浏览器对 fixed 的限制，用 position: absolute + 动态计算视口位置模拟 fixed 效果，同时规避 transform 干扰。
- 移除所有影响定位上下文的祖先样式：重点检查
transform、will-change、overflow: hidden，尤其是<page></page>或<scroll-view></scroll-view>包裹层 - 对 fixed 元素自身加
transform: translateZ(0)（仅 iOS 有效，但有副作用：可能触发硬件加速导致字体模糊，慎用） - 改用
position: absolute+top: calc(100vh - Xpx)替代bottom，避免软键盘压缩 viewport 高度带来的偏移（Xpx 为元素自身高度） - 监听
resize和focusin/focusout事件，在软键盘弹起/收起时手动更新top值（需配合uni.getSystemInfoSync().windowHeight）
scoped 样式与深度选择器怎么写才不翻车
<style scoped></style> 在 H5 是默认开启的，但它的作用域隔离机制在跨组件嵌套或使用第三方 UI 库（如 uView、uni-ui）时极易失效——因为子组件的根节点不在当前 scope 内。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
::v-deep .external-class（已废弃），改用:deep(.external-class)（Vue 3 语法，uni-app 3.x 支持） - 若需全局生效，直接写
<style></style>（无 scoped），或在 App.vue 中统一引入 - 对 cover-view、cover-image 等原生覆盖组件，
scoped完全无效，必须用非 scoped 方式定义样式 - 小程序平台不支持
:deep()，所以务必用条件编译包裹：/* #ifdef H5 */ :deep(.btn) { ... } /* #endif */
H5 定位失效常被忽略的三个硬性前提
很多开发者调了半天样式，最后发现根本没走到 CSS 层面——权限、协议、设备服务才是第一道关卡。
- 非
https或非localhost域名下，navigator.geolocation直接不可用，uni.getLocation()会进fail回调且不抛错；用window.isSecureContext立即验证 - 用户一旦点击“拒绝”定位权限，浏览器不会再弹窗，
navigator.permissions.query({ name: 'geolocation' })返回state: "denied"，此时只能引导用户手动去系统设置开启 - iOS 设备若关闭「设置 → 隐私与安全性 → 定位服务」总开关，或安卓 ROM 禁用某浏览器的位置权限，H5 定位必然失败，和代码无关
这些点不排查完，调样式只是在修表面。特别是上线前用真机走一遍 https + 权限弹窗 + 系统开关，比任何 CSS 调试都关键。
