父容器设了position: relative仍错位，是因为“设了”不等于“生效”：媒体查询可能将其设为display: none或height: 0，transform/filter/will-change会创建新containing block，flex/grid容器默认static不构成定位上下文，ios safari解析flex-basis不一致导致高度偏差。
移动端 absolute 元素偏移不是渲染异常，而是它在多个动态环境里持续“找错爹”——viewport 变、键盘弹、safe area 改、父容器 transform 一动，它的 containing block 就换人，top/left 立刻失准。
为什么父容器设了 position: relative 还是错位？
因为“设了”不等于“生效”。常见干扰包括：
- 父容器被媒体查询设为
display: none或height: 0，absolute 子元素立刻回溯到body定位 - 父容器用了
transform（哪怕只是translateZ(0)）、filter或will-change: transform，会创建新 containing block，导致 top/left 按变形后尺寸计算 - 父容器是
display: contents或 Flex/Grid 容器但没显式加position: relative，它默认仍是static，不构成定位上下文 - 真机上
flex-basis在 iOS Safari 和 Android WebView 解析不一致，可能让父容器高度计算偏差，间接影响子元素 top 值
为什么键盘弹出后 bottom: 0 的按钮飘在半空？
因为 bottom: 0 锚定的是父容器的底边，而键盘弹起时：
-
100vh被锁定在页面加载时的初始高度，不再更新，父容器视觉高度塌缩，但 bottom 值不变 - 父容器若没设
min-height: 100dvh（不是100vh），高度直接归零或变小 -
visualViewport.height在键盘收起瞬间有几十毫秒延迟，直接读取会拿到旧值 - 监听
focusin后用setTimeout(() => { el.getBoundingClientRect() }, 50)才能拿到稳定位置
为什么缩放或横屏后元素突然“飞走”？
因为 top/left 是冻结在初始像素坐标系里的硬编码值，缩放和方向切换时它们不重算：
- 横屏瞬间：
100vh骤降、env(safe-area-inset-top)突变、visualViewport.height延迟更新 -
px单位完全不响应缩放；rem锚定根字号，而 Ctrl+ 缩放不改变视口宽度，rem值也不变 - 用
inset: auto 16px 24px auto替代top/right/bottom/left，现代浏览器下更稳（Chrome 103+ / Firefox 102+ / Safari 16.4+） - 必须确保父容器同时满足：
position: relative+min-height: 100dvh，否则横屏后高度坍缩，inset 失效
为什么真机测试才暴露问题，模拟器看不出来？
模拟器无法复现三大隐性偏差：
- iOS Safari 对
transform: scaleY()和弹性滚动的坐标重算时机与 Chrome DevTools 不同，松手瞬间容易闪一下 -
visualViewport.height在键盘收起后存在几十毫秒延迟，模拟器常忽略该延迟 - 某些 UI 框架（如 uni-app 的
<swiper></swiper>）在真机中会插入无position的包裹层，让 absolute 元素意外锚定到错误祖先
最易被忽略的点：你改的从来不是元素本身，而是它“认谁当爹”——查 offsetParent、看 Containing block、关掉可疑 transform，比调一百遍 top 值都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
