position: fixed 和 absolute 在横竖屏切换时错位，源于视口尺寸、safe area、vh 解析等基准突变且浏览器不自动重算偏移；需用 inset、dvh、env() 动态计算并确保 viewport 正确。
直接说结论：position: fixed 和 position: absolute 在横竖屏切换时错位，不是 CSS 写错了，而是它们依赖的基准（视口尺寸、safe area、vh 解析）在旋转瞬间突变，且浏览器不会自动重算偏移逻辑。
为什么 @media (orientation: landscape) 单独改 top/right 常常无效
这个媒体查询只告诉浏览器“方向变了”，但不感知：iOS Safari 横屏后 100vh 从 844px 骤降到 390px；地址栏收起导致 env(safe-area-inset-top) 突变；fixed 元素的父容器若带 transform，会丢失定位上下文。更糟的是，部分安卓 WebView 延迟数百毫秒才触发该查询，样式已错位再难回滚。
- 常见错误现象：
right: 16px在横屏下把按钮推出屏幕右侧、bottom: 24px让弹窗沉入系统返回键下方、top: 44px被隐藏的 URL 栏吃掉一半空间 - 别用固定像素值重设偏移，优先改用
inset（如inset: auto 16px 24px auto），浏览器会在每次方向切换后重新绑定当前盒模型 - 若必须用像素，搭配
env(safe-area-inset-top)和calc()动态计算：top: calc(env(safe-area-inset-top) + 8px) - 禁用
vh参与定位计算（如top: 5vh），横屏时vh基准塌缩会导致定位漂移；改用dvh（现代 Safari/Chrome 支持）或rem+ 媒体查询微调
absolute 元素参考父容器失效的典型表现与修复
横屏后 .overlay 突然飞到左上角、或整个消失，大概率是它的定位上下文（即最近的 position: relative 父容器）在横屏时高度坍缩为 0，或被 transform/opacity 隐式创建了新层叠上下文，导致 absolute 元素向上穿透到 body 或 viewport 定位。
- 快速验证方法：在 DevTools 中选中该元素，看 Computed 面板里
position是否生效，再逐级检查父元素的position值和实际渲染高度 - 确保父容器明确声明
position: relative，且未被display: contents或transform: scale(0)干扰 - 避免在父容器上同时使用
transform和position: relative，这会使其失去作为absolute参考点的能力 - 横屏专用规则中，给父容器加
min-height: 100dvh（而非100vh），防止其高度塌缩导致子元素定位锚点丢失
viewport 标签写错，@media (orientation: ...) 就永远不触发
几乎所有横竖屏媒体查询失效的根源，都在 <meta name="viewport">。iOS Safari 和 Android Chrome 都依赖它识别方向变化，漏掉 width=device-width，横屏时浏览器仍按竖屏逻辑渲染，@media (orientation: landscape) 永远不匹配。
立即学习“前端免费学习笔记（深入）”；
- 常见错误包括：漏写
width=device-width—— 最常见，直接导致媒体查询“静默失效”；用固定值如width=375或width=768—— 视口宽度不变，浏览器无依据重算方向；被 JS 动态覆盖 —— 初始设置后又被脚本改写，后续旋转不再生效 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 别只靠
(orientation: landscape)，叠加(min-height: 400px) and (max-width: 600px)等尺寸条件，提高匹配鲁棒性 - 某些安卓浏览器把横屏识别为
landscape-primary或landscape-secondary，可改用(orientation: landscape)（CSS Level 5 已统一，但兼容性需查 Can I Use）
真正容易被忽略的点是：横屏切换瞬间，浏览器先按旧尺寸渲染一帧，再应用新样式，中间存在合成层切换间隙——哪怕你写了所有正确规则，fixed 或 absolute 元素仍可能“闪一下”。加 will-change: transform 提前告知浏览器该元素将频繁变化，能提升合成层优先级，但仅对现代浏览器有效；真机测试不可跳过，模拟器的 “Rotate” 按钮 ≠ 实际行为。
