使用 position: relative 可使元素相对于原位置偏移而不脱离文档流。通过 top、left 等属性调整视觉位置，元素原有空间仍保留。例如设置 top: 20px; left: 10px; 元素向下右移动。推荐使用 top 和 left 控制方向，避免 left 与 right 或 top 与 bottom 同时设置引发冲突。relative 常用于微调布局或作为 absolute 定位的参考父级。注意偏移后可能覆盖其他元素，需用 z-index 管理层级，且不影响盒模型和文档流布局。掌握正负值方向是关键。
使用 position: relative 可以为元素设置偏移量，而不会影响文档流中其他元素的布局。元素仍然占据原来的空间，但视觉位置可以通过 top、right、bottom、left 属性进行调整。
relative 偏移的基本用法
当一个元素的 position 设置为 relative 时，你可以通过 top、right、bottom、left 来相对于它原本的位置进行移动。
例如：
.box {<br> position: relative;<br> top: 20px;<br> left: 10px;<br>}
这个元素会向下移动 20px，向右移动 10px（因为 left 正值向右）。注意：元素原本的位置仍被保留，其他元素不会填补空隙。
偏移方向与取值说明
四个偏移属性的作用方向如下：
立即学习“前端免费学习笔记（深入）”；
- top：正值下移，负值上移
- left：正值右移，负值左移
- right：正值左移，负值右移
- bottom：正值上移，负值下移
一般推荐使用 top 和 left 配合，避免同时使用对立属性（如 left 和 right），以免产生冲突或意外布局。
实际应用场景
relative 常用于以下情况：
- 微调某个元素的位置，比如按钮或图标对齐
- 作为绝对定位元素的包含块（祖先元素设为 relative，内部 absolute 元素可相对它定位）
- 在不破坏布局的情况下实现小范围位移
注意事项
使用 relative 时要注意：
- 元素仍占据原文档流中的空间
- 偏移后可能覆盖其他元素，需注意层级（可用 z-index 调整）
- 不会改变元素的盒模型尺寸
基本上就这些。掌握 top、left 等属性的正负值方向，就能灵活控制 relative 元素的偏移。不复杂但容易忽略细节。