相对定位中百分比按元素自身宽高计算，非父容器；绝对/固定定位才按包含块宽高计算，单位语义与定位类型强相关，误用会导致偏移失效。
单位选错是定位偏移失效或表现诡异的最常见原因，不是写法不对，而是单位语义和计算上下文不匹配。
相对定位中百分比不是相对于父容器
很多人写 position: relative 时用 left: 50% 想让元素向右移动父宽的一半，结果发现偏移量很小甚至没动——因为相对定位的百分比是相对于元素**自身宽高**计算的（仅在某些旧引擎中可能误按父容器算，但标准行为不是这样）。
-
left: 50%表示“向右移动自己宽度的 50%”，不是父容器宽度的 50% - 想按父容器宽度偏移，必须改用
position: absolute+left: 50%，且父容器得是position: relative - 像素（
px）、em、rem在相对定位中都按常规逻辑生效，无歧义
绝对/固定定位下百分比才真正“相对”父容器或视口
position: absolute 或 position: fixed 时，top/left 的百分比才是相对于包含块（最近非 static 祖先）宽高；right/bottom 的百分比也同理，但要注意：它们始终以“对应边”为基准，不是统一按 width/height 换算。
-
top: 20%→ 距离包含块顶部为包含块高度的 20% -
right: 10%→ 元素右边缘距包含块右边缘为包含块宽度的 10% -
bottom: 0和bottom: 0%效果完全一样，%在0时无实际意义 - 避免混用单位：
top: 10px+bottom: 5%容易导致高度计算冲突，尤其当父容器尺寸动态变化时
vh/vw 在 fixed 定位中要小心滚动条干扰
vh 和 vw 看似理想，但在 position: fixed 场景下，如果页面有垂直滚动条，100vw 会包含滚动条宽度（约 16px），导致元素超出视口右侧。
- 用
right: 0+width: 100vw比单纯right: 0+left: 0更容易出横向溢出 - 更稳妥的做法是：用
left: 0+right: 0配合box-sizing: border-box，让浏览器自动处理边界 -
vh在移动端 Safari 中曾有视口缩放 bug，若需兼容 iOS 15 以下，建议 fallback 到px或 JS 动态计算
真正麻烦的从来不是单位本身，而是你默认它“应该那样算”——查 MDN 上每个定位类型对单位的定义，比背口诀管用得多。特别是 position: sticky，它的偏移单位行为和 relative 一致，但触发阈值又依赖 scroll container 尺寸，很容易踩进复合陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
