相对定位通过position: relative使元素相对于原位置偏移，示例中.box下移20px、右移10px，元素仍占原空间，常用于微调布局或为绝对定位提供参照，如.button上移5px不影响其他元素。
在CSS中，相对定位（relative） 是指元素相对于它在正常文档流中的原始位置进行偏移。设置
position: relative;
不会将元素从文档流中移除，其他元素仍会像它没有移动一样布局。
如何使用 position: relative
给一个元素设置相对定位，只需将其
position
属性设为
relative
，然后通过
top
、
right
、
bottom
或
left
来调整它的位置。
示例代码：
.box { position: relative; top: 20px; left: 10px; }
上面的样式会让 .box 元素在其原本位置的基础上，向下移动 20px，向右移动 10px。
立即学习“前端免费学习笔记（深入）”；
相对定位的关键特点
- 元素仍占据原来在文档流中的空间，即使它已经视觉上偏移了。
- 偏移方向由
top
、
bottom
、
left
、
right
控制，值可以是像素、百分比等。
- 常用于为绝对定位的子元素提供定位上下文（即父元素设为 relative，子元素可设为 absolute 并相对于父元素定位）。
实际应用场景
比如你想微调某个按钮的位置，又不想影响页面其他布局，就可以用 relative。
.button { position: relative; top: -5px; /* 往上微调 */ }
这样按钮看起来上移了 5px，但原来的位置仍然被保留，不会导致其他元素“补位”或错乱。
基本上就这些。相对定位简单实用，是布局中非常基础且常用的技巧。