相对定位（position: relative）使元素在保留原有文档流空间的同时，通过top、left等属性进行视觉偏移。例如设置top: 10px; left: 20px;将元素向右下移动，但原位置仍被占据，不影响其他布局。它常用于创建绝对定位的包含块、微调元素位置或配合z-index实现层叠，是构建复杂布局的基础。
相对定位（position: relative）是CSS中控制元素位置的重要方式之一。它在保留元素在正常文档流中的原始位置基础上，允许你通过 top、right、bottom、left 属性微调元素的显示位置，而不会影响其他元素的布局。
什么是相对定位？
当一个元素设置为 position: relative 时，它仍然占据其在文档流中的原始空间，但你可以通过偏移属性让它视觉上“移动”。其他元素会像它没动过一样继续排布。
常用于：
- 作为绝对定位元素的包含块（父容器）
- 轻微调整某个元素的位置而不破坏页面结构
- 配合伪元素或层叠效果使用
如何用 top、left 等属性调整位置？
设定相对定位后，使用 top、right、bottom、left 来定义元素相对于其原本位置的偏移量。
立即学习“前端免费学习笔记（深入）”；
.example {position: relative;
top: 10px;
left: 20px;
}
上面代码会让元素向下移动10px，向右移动20px。注意：
- top 表示向上或向下移动（正值下移）
- left 表示向左或向右移动（正值右移）
- 这些值可以是像素、百分比或其他长度单位
相对定位对文档流的影响
关键点在于：即使元素被偏移了，它原来的位置依然被“保留”，页面其他内容不会填补这个空位，也不会被挤开。
举个例子：
- 两个段落之间插入一个
position: relative并向下偏移的div - 虽然div看起来下移了，但它原本的空间仍存在，下一个段落还是按原位置排列
这与 position: absolute 或 float 不同，后者会脱离文档流。
常见应用场景
相对定位看似简单，但在实际开发中非常实用：
-
创建定位上下文：给父元素设
position: relative，让其内部的绝对定位子元素以它为参考点 - 微调图标或文字位置：比如让一个小红点提示符稍微偏离按钮一角
- 实现重叠效果：多个相对定位元素可通过 z-index 控制层级
基本上就这些。相对定位不复杂，但它是理解CSS定位体系的基础，掌握好它才能灵活控制页面布局和元素关系。
