绝对定位元素“飘走”的根本原因是未设置已定位的父容器，导致其默认以视口为参考系；必须为父容器显式设置 position: relative（或其他非 static 值），才能使子元素的百分比定位基于该父容器尺寸计算。
绝对定位元素为什么在缩放或换设备后“飘走”
根本原因不是 position: absolute 本身有问题，而是它默认找“最近的已定位祖先”作为参考系——如果没显式设置，就退回到 <html> 或视口。一旦父容器是 position: static（默认值），子元素的 top: 20% 就按整个视口高算；而视口尺寸一变，百分比结果就变，位置自然漂移。
必须加 position: relative 的父容器
这不是可选项，是硬性前提。只有设了 position: relative（或其他非 static 值）的父级，才能成为 absolute 子元素的定位上下文。
-
.container { position: relative; height: 100vh; width: 100%; }—— 这样.box { position: absolute; top: 10%; left: 5%; }才是相对于.container的 10% 和 5% - 漏掉这句，
.box就会直接锚定到视口，和你预期的局部区域完全脱钩 -
position: relative本身不改变布局，只提供定位锚点，最安全
用 %、vh/vw，别用 px
像素值（如 top: 120px）在小屏上可能超出可视区，在大屏上又显得太靠上。真正响应式的写法是让偏移量随容器或视口动态缩放。
-
top: 20%→ 相对于父容器高度的 20% -
left: 10vw→ 相对于视口宽度的 10%，适合横向固定比例定位 -
width: 80%+padding: 2%→ 内外边距都保持比例一致，避免文字贴边或溢出 - 慎用
max-width和min-height补充限制，防止极端尺寸下失真
居中要配 transform，不能只靠 left: 50%
left: 50% 只把元素左边缘拉到中心，top: 50% 同理。真正居中得靠 transform: translate(-50%, -50%) 把自身宽高的一半“拽回来”。
立即学习“前端免费学习笔记（深入）”；
- 完整写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 父容器仍需
position: relative，否则这个组合会相对于视口居中 - 动画场景下，如果同时写了
transform: scale(1.2)，记得合并声明：transform: translate(-50%, -50%) scale(1.2)，否则后写的会覆盖前一个
最常被忽略的是父容器那行 position: relative —— 它不显眼，但缺了就全盘失效。另外，% 单位的计算基准容易混淆：对 absolute 元素，它永远基于定位上下文（即那个 relative 父容器）的尺寸，不是视口，也不是 body。
