使用 top、left、right、bottom 属性可调整 position: relative 元素的偏移；其中 top 和 left 最常用，偏移基于元素原始位置计算，且不影响文档流布局。
通过 CSS 调整 position: relative 元素的偏移，主要使用 top、right、bottom 和 left 这四个属性。这些属性控制元素相对于其正常文档流位置的偏移方向和距离。
理解 relative 定位的偏移机制
当一个元素设置为 position: relative 时，它仍然占据原本在文档流中的空间，但可以通过 top、right、bottom、left 属性进行视觉上的位置调整。
偏移是相对于元素自身原本的位置计算的：
- top: 向下移动（正值）或向上移动（负值）
- left: 向右移动（正值）或向左移动（负值）
- bottom: 向上移动（正值）或向下移动（负值）
- right: 向左移动（正值）或向右移动（负值）
基本用法示例
以下是一个将元素向右和向下各偏移 20px 的例子：
立即学习“前端免费学习笔记（深入）”；
.box {
position: relative;
top: 20px;
left: 20px;
}
这会让元素从原来的位置向下移动 20px，向右移动 20px，但其原始占位空间不变，其他元素仍按未偏移的位置布局。
只使用部分方向进行偏移
不需要同时设置所有方向。可以根据需要仅使用其中一到两个属性：
- 仅垂直偏移：
top: -10px; - 仅水平偏移：
left: 15px; - 向上并右移：
top: -5px; left: 10px;
注意：如果同时设置 top 和 bottom，只有 top 生效（除非元素有高度且处于绝对定位上下文中，但这不适用于普通 relative 偏移）。同理，left 优先于 right。
单位选择与响应式考虑
偏移值可以使用多种单位：
px：固定像素，最常用%：相对于包含块的宽度（left/right）或高度（top/bottom）em/rem：相对于字体大小，适合响应式设计
例如，使用百分比实现相对容器的弹性偏移：
.title {
position: relative;
left: 5%;
top: 2%;
}
基本上就这些。合理使用 top、left 等属性，能精准控制 relative 元素的位置微调，常用于布局微调、图标偏移或动画起点设置。 
