横屏下CSS定位需配合媒体查询重写所有方向相关属性，否则absolute元素会错位；vh/vw含义翻转，父容器须设position:relative且尺寸明确，避免固定像素值，z-index和transform在部分平台不稳定。
横屏模式下，CSS定位本身不自动适配方向变化，必须配合媒体查询 + 显式尺寸控制，否则 position: absolute 的 top/left 值会按竖屏逻辑错位。
@media (orientation: landscape) 必须包裹完整定位规则
只写 @media (orientation: landscape) 但没重定义 top/left 或 width/height，组件不会“自动横过来”。很多开发者误以为媒体查询只是“开关”，实际它只提供作用域，所有依赖方向的值都得重新声明。
- 错误写法：
@media (orientation: landscape) { .panel { z-index: 10; } }—— 没改位置或尺寸，毫无意义 - 正确写法：在媒体查询内重写关键定位属性，例如
top: 20px; left: auto; right: 10px; width: 300px; height: 60vh; - 注意：
vh/vw在横屏时含义翻转——100vh变成屏幕**宽度**，100vw变成屏幕**高度**，这点极易踩坑
absolute 定位元素在横屏中容易脱离容器流
当父容器未设 position: relative，且横屏后父容器宽高比剧变，position: absolute 元素会以视口为基准偏移，导致漂移或重叠。尤其在微信小程序或 Jitsi Meet 类视频应用中，横屏后缩略图常“飞出”边界。
- 必须确保父容器有
position: relative，且其width/height在横竖屏下都明确（不能只靠100%） - 避免用固定像素值定位，例如
left: 200px；改用视口单位或 calc()，如left: calc(100vw - 320px) - 若组件需锚定右下角，竖屏用
bottom: 20px; right: 20px，横屏则可能要改成top: 20px; right: 20px（因“底部”已变成左侧）
z-index 和 transform 在横屏中可能失效
某些平台（如早期微信小程序 WebView、部分安卓 WebView）对横屏下 transform: translate() 与 z-index 的组合支持不稳定，表现为层级错乱或定位偏移 5–10px。
立即学习“前端免费学习笔记（深入）”；
- 优先用
top/right等原生定位，而非transform: translateX()模拟横向移动 - 如果必须用
transform，加上will-change: transform触发硬件加速，并在媒体查询中重置transform值 -
z-index失效常因父级 stacking context 重置——横屏时若父容器加了opacity: 0.99或transform，会新建层叠上下文，需检查层级链
横屏布局最麻烦的不是写多少代码，而是每个 top、left、width 都得在两个方向上独立验证——尤其当组件同时参与 flex 布局和绝对定位时，flex 的主轴变化会让 absolute 元素的参照系悄然偏移。
