相对定位通过position: relative使元素相对于原位置偏移且保留原有空间，利用top、left等属性调整位置，常用于微调布局、作为绝对定位的包含块或配合z-index控制层级。
相对定位（relative positioning）在CSS中用于相对于元素原本的位置进行偏移，同时保留其在文档流中的原始空间。通过 position: relative 可以实现这一效果。
设置 position: relative
要使用相对定位，先将元素的 position 属性设为 relative。这样该元素仍占据原来在页面中的位置，但可以通过 top、right、bottom、left 属性进行位置调整。
示例：
.box {
position: relative;
top: 10px;
left: 20px;
}
这个 .box 元素会从它原本的位置向下移动 10px，向右移动 20px，但它原先占据的空间不会被释放，其他元素不会填补这个空位。
理解偏移方向
使用 top、right、bottom、left 控制偏移时，注意它们是相对于元素自身原始位置计算的：
立即学习“前端免费学习笔记（深入）”；
- top: 10px —— 向下移动 10px
- top: -10px —— 向上移动 10px
- left: 20px —— 向右移动 20px
- left: -20px —— 向左移动 20px
right 和 bottom 的行为类似，但通常建议优先使用 top 和 left，避免与其他布局属性冲突。
相对定位的实际用途
相对定位常用于以下场景：
- 微调某个元素的位置，而不影响整体布局
- 作为绝对定位元素的包含块（只要父元素设置了 position: relative）
- 配合 z-index 实现层级控制
例如，让一个图标在其容器内轻微偏移，又不打乱周围内容的排布，relative 是理想选择。
基本上就这些。掌握 position: relative 能让你更灵活地控制页面元素的位置，同时保持文档流稳定。
