相对定位通过position: relative实现，元素在原位置基础上用top、left等属性偏移，不影响其他元素布局，常用于微调；例如.top: 10px; left: 20px使元素右下移动，而.btn-text{top: -2px}可上移文本对齐图标；此外，relative还为absolute子元素提供定位上下文，如.parent设relative后，其内部.child设absolute即相对于父元素定位，适用于局部调整与复杂定位结构。
相对定位（position: relative）是CSS中控制元素位置的重要方式之一。它让元素在原本的文档流位置基础上，进行微调，而不会影响其他元素的布局。
relative定位的基本用法
当一个元素设置为 position: relative 时，它仍然占据原来在文档流中的空间，但可以通过 top、right、bottom、left 属性来相对于自身原始位置进行偏移。
例如：
.box {<br> position: relative;<br> top: 10px;<br> left: 20px;<br>}
这个 .box 元素会从它原本的位置向下移动10像素，向右移动20像素，但页面中其他元素仍按它“未移动”时的位置排列。
立即学习“前端免费学习笔记（深入）”；
利用relative进行精准微调
relative常用于对某个元素进行小幅度的位置调整，比如修正图标对齐、文字偏移或响应式设计中的细微适配。
- 使用 top 和 bottom 控制垂直位置：正值向下，负值向上
- 使用 left 和 right 控制水平位置：正值向右，负值向左
- 只设置需要的方向即可，不需要四个方向都写
比如要将一个按钮的文本微微上移以居中对齐图标：
.btn-text {<br> position: relative;<br> top: -2px;<br>}
relative与其他定位的关系
relative本身不脱离文档流，因此非常适合做局部调整。它还有一个重要作用：为绝对定位（absolute）的子元素提供定位上下文。只要父元素设置了 position: relative，其内部的绝对定位元素就会相对于这个父元素定位。
例如：
.parent {<br> position: relative;<br> width: 200px;<br> height: 150px;<br>}<br><br>.child {<br> position: absolute;<br> top: 10px;<br> right: 10px;<br>}
此时 .child 会相对于 .parent 的右上角定位，而不是整个页面。
基本上就这些。relative定位简单实用，特别适合用来微调元素位置又不影响整体布局。掌握好 top、left 等偏移属性，就能灵活控制页面细节。不复杂但容易忽略。
