必须给直接父容器设 position: relative，否则百分比绝对定位会失准；inset 属性更稳定，calc() 可精准补偿尺寸，需排查 transform、flex 高度浮动和 overflow 等干扰源。
父容器没设 position: relative 就用百分比？白搭
绝对定位元素的 top、left 永远相对于最近的已定位祖先（position 为 relative、absolute、fixed 或 sticky）。如果父容器没声明 position: relative，浏览器会继续往上找——可能落到 body 或 html 上，而它们的尺寸随视口浮动，top: 10% 就失去稳定参照。
常见错误现象：top: 10% 在 1920px 屏幕下看起来刚好，在 1366px 下明显偏高或偏低；调试时发现元素“飘”到了视口顶部之外。
- 必须显式给**直接父容器**加
position: relative（不能是fixed，它脱离文档流，宽高不可靠） - 父容器不能只靠内容撑开高度（比如没设
height或min-height），否则百分比无参照，浏览器按 0 计算 - 避免父容器被
transform、scale、负margin干扰——这些会悄悄移动其padding box起点，让top: 10%的计算原点偏移
inset + position: relative 是更稳的现代方案
inset 属性（如 inset: 1rem auto auto 2rem）在 position: relative 下就能生效，它不依赖“找定位祖先”，而是基于元素自身的原始文档位置偏移，天然避开上下文漂移问题。
适用场景：按钮图标微调、弹层锚点、响应式装饰元素等不需要强覆盖的场合。
- 兼容性已覆盖 Chrome 87+、Firefox 63+、Safari 14.1+；旧版可用 PostCSS 自动展开为
top/right/bottom/left - 不适用于模态框遮罩层这类必须真正脱离文档流的强覆盖需求
- 写法简洁：
inset: 5% auto auto 10%比top: 5%; right: auto; bottom: auto; left: 10%更易读且不易漏写
用 calc() 补偿自身尺寸，比 transform: translate() 更可控
很多人习惯写 top: 50%; left: 50%; transform: translate(-50%, -50%) 实现居中，但一旦父容器有 padding 或子元素本身带 border，就容易错位。用 calc() 把偏移算清楚更可靠。
典型写法：left: calc(50% - 120px); top: calc(20% + 16px)——先按百分比定基准点，再减去自身宽高一半或加减固定边距。
- 贴右下角优先用
right: 2%; bottom: 2%，比left: 98%更直观、更易维护 - 避免混合使用
top/left和transform，尤其当父容器有padding时，两者基准线不一致 - 慎用
vh：iOS Safari 中vh会因地址栏显示/隐藏跳动；可用 JS 动态设置--vhCSS 变量规避
错位往往不是单位问题，而是多个干扰源叠加
真正要花时间调试的，从来不是该写 % 还是 vh，而是确认父容器的 position 是否生效、尺寸是否可控、有没有被 transform 或负边距偷偷改了基准线。
调试时必查的三个隐藏干扰源：
- 父容器是否意外套了
transform: scale()（常见于 rem 适配方案），它会让getBoundingClientRect()返回坐标失真 - 父容器是否用了
display: flex且align-items: center，但自身没设height，导致实际高度浮动，%偏移随之失准 - 父容器是否被
overflow: hidden截断，或内部有transform元素，影响定位计算原点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
