相对定位（position: relative）的偏移是相对于元素原本在文档流中的位置移动，移动后原占位空间保留，不影响其他元素布局；top/bottom/left/right用于沿坐标轴平移元素，top和left优先，偏移不改变文档流位置，百分比单位按常规逻辑计算。
相对定位（position: relative）的偏移，是相对于元素原本在文档流中的位置进行移动，移动后原占位空间仍保留，不影响其他元素布局。
top / bottom / left / right 的作用机制
当设置 position: relative 后，再使用 top、bottom、left、right，它们不是“拉伸”或“缩放”，而是把元素从原始位置沿指定方向平移：
-
top: 20px→ 元素向上移动 20px（y 轴负方向） -
bottom: 20px→ 元素向下移动 20px（y 轴正方向） -
left: 30px→ 元素向右移动 30px（x 轴正方向） -
right: 30px→ 元素向左移动 30px（x 轴负方向）
注意：top 和 bottom 同时设置时，top 优先（bottom 被忽略）；left 和 right 同时设置时，left 优先。但实际中一般只设其中一维的两个值（如 top+left），避免冲突。
偏移不会改变文档流位置
这是相对定位最核心的特点：即使元素被 top 或 left 推开，它原来占据的空间依然存在，后续元素照常排布，不会“填补空缺”。
立即学习“前端免费学习笔记（深入）”；
例如：
<div style="position: relative; top: 40px; left: 20px;">我是相对定位</div> <div>我紧挨着上面那个 div</div>
第二个 div 会出现在第一个 div 原本该在的位置下方，而不是被推下来的视觉位置之后。
单位与取值范围
top/left/right/bottom 支持多种单位：
- 像素：
top: 10px - 百分比：
left: 5%（相对于包含块的宽度/高度，但注意：相对定位的百分比计算仍基于自身原始位置的参考系，非父容器尺寸） - em / rem / vh / vw 等也有效
- 可为负值：
top: -15px表示向上反向移动（即向下偏移）
⚠️ 百分比在相对定位中容易误解：它不是相对于父容器宽高，而是按常规长度单位逻辑参与偏移计算，行为和 px 一致，只是数值按比例换算。
与其他定位方式的区别要点
对比绝对定位（position: absolute）：
- 相对定位偏移基准 = 元素自己原来的位置
- 绝对定位偏移基准 = 最近的已定位祖先（或初始包含块）的边界
- 相对定位保留空间，绝对定位脱离文档流、不占位
也就是说，想微调某个元素又不想影响页面整体布局，用 relative + top/left 是安全选择；想彻底脱离流做精确定位，才考虑 absolute 或 fixed。
