position: relative 本身不实现精准定位，仅使元素相对于原始位置偏移并保留占位；其核心价值是为 position: absolute 子元素提供定位上下文，若无此相对定位父容器，absolute 将回溯至 html 导致定位失控。
position: relative 本身不用于“精准定位”外部元素，它只负责让元素**相对于自己原始位置偏移**，同时保留占位。真要实现“精准定位”，它常是为 position: absolute 子元素搭台——换句话说：单独用 relative 做不了精准布局，但不用它，absolute 往往就找不到参考系。
为什么 top/left 在 relative 元素上“看起来不准”
常见现象是：设了 top: 20px; left: 30px;，但元素没按预期停在页面某固定坐标点。这是因为 relative 的偏移基准是它**在文档流中原本的左上角位置**，而这个位置受前面元素、margin、行高、字体大小等影响，本身就不稳定。
- 如果你没控制父容器高度/行内格式化上下文，
top偏移可能被 line-height 或 vertical-align 拉扯 -
left值在 inline 元素上表现异常（比如span），必须先转成display: inline-block或block - 百分比值（如
left: 10%）是相对于包含块宽度，不是视口——容易误判
relative 必须搭配祖先容器才能撑起 absolute 定位
这是它最实际的“精准定位”用途：给子元素提供 position: absolute 的定位上下文。没有这个 relative 父容器，absolute 会一路往上找，直到 html，结果经常飘到页面外。
- 父容器只需声明
position: relative，无需写top/left—— 即使值为0也得显式写，否则不构成“已定位祖先” - 父容器最好有明确宽高或
min-height，避免因内容塌陷导致子元素定位错乱 - 不要在同一个元素上既用
relative又用transform做位移，二者叠加可能导致渲染层计算偏差（尤其涉及z-index时）
relative 偏移方向的正负号容易搞反
很多人记成 “top: 10px 是往上走”，其实相反：top 值为正，表示**向下拉离原始位置**；left 值为正，表示**向右拉离原始位置**。这是 CSS 坐标系决定的（原点在左上，y 轴向下为正）。
立即学习“前端免费学习笔记（深入）”；
-
top: -20px= 向上移动 20px（视觉上更靠近上面元素） -
right: 15px= 向左挤出 15px（因为是从右边边界往左算） - 水平方向同时写
left和right，浏览器只认left；垂直方向同时写top和bottom，只认top
真正需要“精准定位”的场景，relative 大多只是个配角。它的价值不在自己动得多准，而在稳稳托住 absolute 子元素——这点一旦漏掉，整个定位链就断了。
