必须显式给直接父容器加position: relative，且避免transform、负margin及无高度等干扰；更稳方案是用inset属性配合position: relative，它基于元素自身原始位置偏移，不依赖父容器定位上下文。
百分比单位本身不能解决absolute偏移问题，直接替换top: 20px为top: 5%大概率依然错位——因为错位根源不在单位，而在定位上下文是否可靠。
父容器没设position: relative就用百分比？白搭
absolute元素的top/left永远相对于最近的已定位祖先（position值为relative、absolute、fixed或sticky）。如果父容器没声明position: relative，浏览器会继续往上找，甚至落到html或body上——而它们的尺寸往往随视口浮动，导致5%失去稳定参照。
- 必须显式给直接父容器加
position: relative，且不能是position: fixed（它脱离文档流，宽高不可靠） - 避免父容器被
transform、scale或负margin干扰，这些会悄悄移动其padding box起点，让top: 10%的计算原点偏移 - 检查父容器是否只靠内容撑开高度（比如没设
height或min-height），此时百分比无参照，浏览器按0算
top: 20%失效的三个典型场景
即使父容器有position: relative，以下情况仍会让百分比失效：
- 父容器是
display: flex且align-items: center，但自身没设height——实际高度浮动，%偏移随之失准 - 父容器设置了
margin-top: -2px或transform: translateY(-1px)，会偏移其padding box起点 - 父容器被
overflow: hidden截断，或内部有transform元素，导致getBoundingClientRect()返回坐标失真
比百分比更稳的方案：inset + position: relative
现代CSS的inset属性（inset: 1rem auto auto 2rem）在position: relative下就能生效，它基于元素自身的原始文档位置偏移，不依赖父容器是否relative、有没有transform，天然鲁棒。
- 兼容性已覆盖 Chrome 87+、Firefox 63+、Safari 14.1+；旧版可用 PostCSS 自动展开
- 适合按钮图标微调、弹层锚点、响应式装饰元素等不需要“盖在其他内容上”的场景
- 注意：
inset不适用于需要真正脱离文档流的强覆盖需求（如模态框遮罩层），此时仍需absolute+ 锁死上下文
真正要花时间调试的，从来不是该写%还是vh，而是确认父容器的position是否生效、尺寸是否可控、有没有被transform或负边距偷偷改了基准线——这些隐藏干扰源叠加起来，才是错位最常发生的现场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
