横屏时fixed元素错位是因页面容器rotate(90deg)导致锚点坐标系旋转，top/right等值需手动映射方向；推荐改用absolute+动态坐标计算或sticky替代，注意viewport设置与祖先transform干扰。
横屏时fixed元素彻底错位，是因为坐标系被旋转了
不是CSS写错了，而是H5横屏普遍靠transform: rotate(90deg)模拟——整个页面容器被旋转后，position: fixed的锚点坐标系也跟着转了。比如你设top: 0; right: 0，实际可能贴在左下角；bottom: 20px会变成离“新底部”（即原左侧）20px。
这种错位在真机上比模拟器明显得多，尤其iOS Safari和微信WebView中，旋转瞬间就能看到元素跳变。
- 别指望媒体查询自动修正——
@media (orientation: landscape)只提供作用域，top/right等值必须重写 -
vh/vw含义翻转：横屏下100vh= 屏幕宽度，100vw= 屏幕高度 - 用
getBoundingClientRect()验证：横屏后top突变为非0值，基本可确认是坐标系问题
禁用横屏fixed，改用absolute + 动态坐标映射
这是目前H5端最可控的落地解法。放弃让浏览器“猜”定位，自己算。
核心逻辑是：监听resize或orientationchange，读取window.innerHeight和目标元素getBoundingClientRect()，再根据横竖屏状态手动映射方向：
- 竖屏：
bottom: 20px→ 计算为el.style.bottom = '20px' - 横屏：同个“底部”对应的是左侧，应转为
el.style.left = '20px' - 必须加
setTimeout(() => {}, 0)延迟读取尺寸，否则拿到的是旋转前的旧值 - 根容器要设
position: relative且min-height: 100vh（不能只写height: 100%，键盘弹出时会塌）
viewport和祖先transform必须同时检查
横屏错位常是多重因素叠加的结果。两个硬性条件缺一不可：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">——漏掉maximum-scale=1.0或minimum-scale=1.0，旋转后视口重绘延迟会导致fixed锚点漂移 - 逐层检查父级
Computed面板：只要某层有transform（哪怕只是translateZ(0)）、filter、opacity 或<code>will-change，就会创建新包含块，把fixed“劫持”成relative - 第三方组件（如轮播图、弹窗）内部常默认加
transform: translateX(0)，你没写，但它写了
优先用sticky替代fixed，但注意触发条件
position: sticky在横竖屏切换时能自动响应滚动容器尺寸变化，且完全不受祖先transform影响，是更鲁棒的选择。
- 适用场景：顶部导航栏（
top: 0）、底部操作栏（bottom: 0）、局部悬浮按钮 - 必须保证父容器有明确高度（
height或内容撑开），否则sticky不会触发 - 兼容性已覆盖iOS Safari 11+、Chrome 56+、Firefox 64+，当前主流移动端无风险
- 横屏时若父容器高度剧变（如flex主轴翻转），需同步确保其
height在媒体查询中被重定义
真正麻烦的不是代码量，而是每个top、left、width都得在横竖屏下独立验证——尤其当组件同时参与flex布局和绝对定位时，flex主轴变化会让absolute参照系悄然偏移，而这个偏移在开发者工具里根本看不出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
