根本原因是父容器未设 position: relative 或尺寸不可靠，导致 top: 10% 相对于视口而非父容器计算；应设父容器 position: relative 且有明确高度，并优先用 inset 或 calc() 提升稳定性。
绝对定位元素在不同分辨率下偏移，根本原因不是单位选错了，而是定位参照系没立稳——90% 的错位问题出在父容器没设 position: relative，或它自身尺寸不可靠。
为什么 top: 10% 在 1366px 屏幕上明显偏高？
浏览器计算 top: 10% 时，会找最近的“已定位祖先”。如果父容器没声明 position: relative，它就一路往上找到 body 或 html；而这两个元素的高宽随视口浮动，10% 就变成视口高度的 10%，不是你想要的“父容器高度的 10%”。
- 常见错误现象：
top: 20%在 1920×1080 下刚好，在 1366×768 下元素“飘”到视口外，调试时发现getBoundingClientRect().top返回负值 - 必须给直接父容器加
position: relative（不能是fixed，它脱离文档流，高度常为 0） - 父容器还得有明确高度：比如
height: 100vh、min-height: 600px，或靠内容撑开但内容不能是空的 - 用开发者工具勾选 “Layout Shift Regions”，能一眼看出哪个盒子在跳动——往往就是那个没设
position: relative的父级
inset 比 top/left 更稳，但得看场景
inset 是现代方案，它不依赖祖先定位上下文，而是基于元素原始文档位置做偏移，天然避开“找不到父容器”的问题。但它只适用于不需要强覆盖的场景。
- 写法更简洁：
inset: 5% auto auto 10%等价于top: 5%; right: auto; bottom: auto; left: 10%，少写三行，也不怕漏掉right或bottom - 兼容性没问题：Chrome 87+、Firefox 63+、Safari 14.1+ 都支持；旧版可用 PostCSS 自动展开
- 不适用模态框遮罩层、全屏弹窗这类必须真正脱离文档流的组件——它们仍得用
position: fixed+ 显式top/left - 慎用在有
transform的父容器里：transform: scale(0.9)会让inset偏移量被缩放，视觉位置失真
用 calc() 补偿自身尺寸，比 transform: translate() 更可控
居中常用 top: 50%; left: 50%; transform: translate(-50%, -50%)，但一旦父容器有 padding、子元素带 border 或 box-sizing: border-box 被忽略，就会错位。
立即学习“前端免费学习笔记（深入）”；
- 更可靠的写法：
left: calc(50% - 60px); top: calc(20% + 16px)——把自身宽高一半、内边距、边框都算进去 - 贴右下角优先用
right: 2%; bottom: 2%，比left: 98%更直观、维护成本更低 - 避免混合使用：
top: 50%和transform: translateY(-50%)基准线不一致，尤其当父容器有padding-top时，top从 padding box 起算，transform从 border box 起算 - iOS Safari 中
vh会因地址栏显示/隐藏跳动，可用 JS 动态设置:root { --vh: 100vh; }规避
媒体查询不是补丁，是定位逻辑的一部分
当百分比或 inset 仍无法覆盖极端比例（比如超宽屏 3440×1440 或小屏 1024×768），媒体查询就是最后一道防线。它不该是“先写死 px 再硬调”，而是对定位策略的分段定义。
- 示例：悬浮按钮在桌面用
bottom: 20px; right: 30px，在小屏改用bottom: 10vh; right: 5%，并加@media (max-width: 768px)切换 - 别只调数值：小屏下可把
position: fixed改为position: static，让按钮回归文档流，彻底避开定位漂移 - 检查
overflow: hidden：错位有时不是元素跑偏了，而是被裁掉了——先加outline: 1px solid red把所有盒子显形再判断 - 最常被忽略的干扰源：
transform: scale()（用于全局缩放适配 rem）、viewport的user-scalable=no、父容器意外的flex高度浮动
真正难的从来不是写对一行 top: 10%，而是确认这行代码运行时，它的“10%”到底相对于谁、谁又真的存在且尺寸可靠。
