position: relative 的 top/left 百分比偏移是相对于元素自身宽高计算的，而非父容器；top/bottom 按自身高度，left/right 按自身宽度，与父容器尺寸无关。
不是基于父元素计算的——position: relative 的 top、left 等百分比偏移，是相对于**元素自身尺寸**（宽或高）计算的，不是父容器。
relative 的 % 是按自身宽高算的
这是最常被误解的一点：很多人看到 top: 50% 就以为是“移到父容器一半高度处”，其实它表示“向上移动自身高度的 50%”。同理，left: 20% 是向右移动自身宽度的 20%。
-
top/bottom百分比 → 参照元素自身的height -
left/right百分比 → 参照元素自身的width - 这个行为在所有现代浏览器中一致，W3C 规范明确如此定义
- 哪怕父容器 width/height 是 auto，也不影响该计算 —— 因为它根本不看父容器
为什么总有人觉得它在看父容器？
因为实际效果容易混淆。比如一个 width: 200px; height: 100px 的元素设 left: 50%，会右移 100px；如果父容器刚好也是 200px 宽，就“碰巧”看起来像按父宽算的。但只要改下元素自身宽高，偏差立刻暴露。
- 测试方法：给元素加
border: 1px solid red，再设width: 100px; height: 40px; position: relative; left: 50%→ 实际右移 50px，不是父宽的 50% - 常见误判场景：用
em或rem单位时字体大小变化，也会让元素宽高变，间接影响left: 50%偏移量 - 和
margin/padding的 % 完全不同——后两者才真按父宽算
relative 百分比偏移的实际用途有限
由于它依赖自身尺寸，而大多数块级元素的宽高由内容撑开（height: auto），top: 50% 往往等于 top: 0（因为自身高度为 0），导致偏移无效。
- 只有当元素有明确
width和height（比如固定像素、vh、或 flex/grid 子项）时，top/left百分比才有可预测效果 - 真正想做“相对父容器位置微调”，应该用
position: relative作为父容器，子元素用position: absolute+ 百分比偏移（这时才按父容器算） - 想靠
relative实现垂直居中？基本不可行 ——top: -50%是把元素上边缘往上拉自身高度一半，跟父容器高度无关
真正需要“按父容器尺寸偏移”的时候，别硬套 relative 的百分比，直接换思路：要么用 absolute 配合已定位父级，要么用 transform: translate()（它也按自身算，但更可控），或者干脆用 flex / grid 布局替代。百分比单位在 CSS 里从来不是统一规则，relative 的这一个，恰恰是最不“相对父容器”的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
