CSS中的relative定位是position属性的可选值之一，属于相对定位模式，它的定位基准是元素自身在文档流中的原始位置，不会让元素脱离文档流，这是它和absolute、fixed定位最明显的区别。
relative定位的基础设置规则
要使用relative定位，首先需要给目标元素设置position: relative属性，之后就可以通过top、right、bottom、left四个偏移属性来调整元素的位置。偏移属性的取值可以是像素、百分比、em等CSS长度单位，正数和负数都可以生效。
这里需要注意，relative定位的偏移不会影响其他元素在文档流中的位置，其他元素还是会按照该元素原始的位置来排列，就好像偏移后的元素还留在原来的位置一样。
基础使用示例
下面是一个简单的relative定位使用案例，我们给一个div元素设置相对定位并向右偏移20像素，向下偏移10像素：
/* 基础relative定位示例 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 设置相对定位 */
position: relative;
/* 向右偏移20px，向下偏移10px */
left: 20px;
top: 10px;
}
relative定位的核心特性
- 不脱离文档流：元素设置relative定位后，仍然会占据原本在文档流中的空间，周围的元素不会补位到它的原始位置。
- 定位基准是自身原始位置：偏移量的计算起点是元素没有设置定位时的位置，left为正表示向右偏移，top为正表示向下偏移，反之则向相反方向偏移。
- 可以作为绝对定位子元素的参照容器：如果子元素设置了absolute定位，而父元素设置了relative定位，那么子元素的定位基准就是该父元素，这是relative定位非常常用的场景。
- z-index属性生效：设置了relative定位的元素可以使用z-index属性调整堆叠顺序，数值越大，元素越靠上。
relative定位的常见布局调整技巧
1. 微调元素位置
当我们需要对已布局好的元素做微小位置调整时，使用relative定位是最合适的选择，不需要修改整体布局结构，只需要添加偏移属性即可。比如按钮图标和文字对齐有偏差时，可以用relative定位微调图标的位置：
/* 按钮图标微调示例 */
.btn-icon {
display: inline-block;
width: 16px;
height: 16px;
background: url(icon.png) no-repeat;
position: relative;
/* 向上微调2px，让图标和文字对齐 */
top: -2px;
}
2. 作为绝对定位子元素的定位容器
很多时候我们需要让子元素相对于父元素做绝对定位，这时候只需要给父元素设置relative定位，子元素设置absolute定位即可，不需要给父元素设置偏移属性。比如实现卡片右上角的角标效果：
<div class="card">
<div class="badge">热门</div>
<p>这是卡片内容</p>
</div>
/* 卡片容器设置relative定位 */
.card {
width: 200px;
height: 150px;
border: 1px solid #eee;
position: relative;
}
/* 角标绝对定位，相对于card容器 */
.badge {
position: absolute;
right: 0;
top: 0;
background-color: #f56c6c;
color: #fff;
padding: 2px 8px;
font-size: 12px;
}
3. 配合z-index实现元素堆叠
当页面有多个元素重叠时，可以给设置了relative定位的元素设置z-index属性，控制元素的显示层级。比如实现下拉菜单浮在其他内容上方：
/* 下拉菜单容器 */
.dropdown {
position: relative;
z-index: 10;
}
/* 下拉菜单列表 */
.dropdown-list {
position: absolute;
top: 100%;
left: 0;
width: 120px;
background-color: #fff;
border: 1px solid #eee;
/* 确保下拉列表显示在其他内容上方 */
z-index: 20;
}
relative定位使用注意事项
- 不要滥用relative定位，如果只是需要普通的元素排列，不需要偏移或者作为定位容器时，不需要设置relative定位，避免不必要的样式冗余。
- 偏移属性如果没有设置，元素不会有任何位置变化，不需要为了让z-index生效而随便设置left、top等属性为0，不过设置
left:0;top:0也不会产生视觉影响。 - relative定位的偏移不会影响元素本身的盒模型尺寸，width、height等属性不会因为偏移而改变。
总结来说，relative定位是CSS布局中非常实用的定位方式，核心优势是不脱离文档流同时可以灵活调整位置，还能作为绝对定位元素的参照容器，掌握它的使用技巧可以解决很多常见的布局问题。
CSS_relative定位相对定位布局position属性元素偏移修改时间：2026-06-14 03:12:30