CSS中的相对定位（relative position）是最基础也是最常用的定位方式之一。当一个元素设置了position:relative后，它仍然处在正常的文档流中，但可以通过偏移属性相对于自己原来的位置进行移动，且原本所占的空间不会被其他元素占据。
一、如何使用relative相对定位
使用相对定位只需要在CSS中将position属性设为relative，然后配合top、right、bottom、left来指定偏移量。这些偏移量是相对于元素在文档流中的原始位置计算的。
.box {
position: relative;
top: 20px;
left: 30px;
}
上面代码表示.box元素向下移动20像素，向右移动30像素。注意，元素原来所在的位置依然被保留，页面其他内容的排布不会因为这个偏移而改变。
二、相对定位与文档流的关系
很多开发者误以为使用了position:relative就会脱离文档流，其实不然。相对定位元素始终占据原本的空间，这就是它和普通文档流布局兼容的原因。
| 定位方式 | 是否脱离文档流 | 原位置是否保留 |
|---|---|---|
| static（默认） | 否 | 是 |
| relative | 否 | 是 |
| absolute | 是 | 否 |
1. 为什么原位置保留很重要
因为原位置保留，所以相对定位不会影响后续兄弟元素的布局。你可以安全地用它对某个按钮上的小红点做轻微偏移，而不用担心页面错位。
2. 作为包含块使用
如果父元素设置了position:relative，那么其内部使用position:absolute的子元素就会以这个父元素为定位参照，而不是以浏览器窗口为参照。
<div class="parent"> <div class="child">绝对定位内容</div> </div>
.parent {
position: relative;
width: 200px;
height: 200px;
}
.child {
position: absolute;
top: 10px;
right: 10px;
}
三、常见调整元素位置的方法
- 使用top和left进行右下方向偏移
- 使用bottom和right让元素向左上微调
- 只设置其中一个方向，避免双向拉伸导致理解混乱
- 配合z-index控制层叠顺序，防止被遮挡
代码示例：图标上的提示点偏移
.icon {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: -5px;
right: -5px;
background: red;
color: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
}
在上例中，.icon使用relative成为包含块，.badge用absolute定位到右上角外移一点，这是电商网站常见的购物车红点写法。
四、使用建议与注意点
相对定位适合做小范围位移和定位上下文，不要拿它来做整体布局，整体布局应优先使用flex或grid。
另外，在写HTML结构时，像<input>、<div>这类标签名在文章中提及需转义，但在代码块里写真实标签则不用转义。函数调用如open()也不是标签，不要写成<open>。
总结来说，CSS相对定位通过position:relative让元素基于原位置偏移，不脱离文档流，是控制元素微调与建立定位上下文的实用工具。
CSSrelative_position文档流修改时间：2026-07-26 06:54:10