在css布局中，position属性是实现元素定位的核心属性，其中relative（相对定位）和absolute（绝对定位）是最常用的两个取值，两者的表现差异较大，很多开发者在初学阶段容易混淆，下面将从多个维度对比两者的区别。
核心参考系差异
相对定位和绝对定位最本质的区别在于定位的参考系不同，这也是两者表现差异的根源。
- 相对定位的参考系是元素自身在文档流中的原始位置，设置偏移后，元素会相对于自己原来的位置移动。
- 绝对定位的参考系是最近的已定位祖先元素，也就是position取值不为static的祖先元素，如果不存在这样的祖先，就会参考初始包含块（通常是html元素或者浏览器视口）。
文档流占用情况
两种定位方式对文档流的占用规则也有明显不同：
- 相对定位的元素仍然会占用原本在文档流中的位置，即使设置了偏移，原来的位置也不会被其他元素占据，只是视觉上发生了移动。
- 绝对定位的元素会完全脱离文档流，不再占用原本的位置，后续的元素会按照文档流规则填补该元素原来的位置，就像该元素不存在一样。
偏移规则对比
两者都可以通过top、right、bottom、left四个属性设置偏移量，但生效规则不同：
| 对比项 | 相对定位 | 绝对定位 |
|---|---|---|
| top属性 | 相对于自身原始位置向下移动对应距离 | 相对于参考系的上边界向下移动对应距离 |
| left属性 | 相对于自身原始位置向右移动对应距离 | 相对于参考系的左边界向右移动对应距离 |
| 偏移后原位置 | 保留，不会被其他元素占用 | 消失，其他元素可占据 |
代码示例演示
下面通过两段代码分别展示两种定位的实际表现：
相对定位示例
/* 相对定位样式 */
.relative-box {
width: 100px;
height: 100px;
background-color: #409eff;
position: relative;
top: 20px;
left: 30px;
}
/* 后续占位元素 */
.next-box {
width: 100px;
height: 100px;
background-color: #f56c6c;
}上述代码中，蓝色盒子设置相对定位后向下移动20px、向右移动30px，但是原来的位置仍然保留，红色盒子会排在蓝色盒子原始位置的下方，不会填补蓝色盒子偏移后的空位。
绝对定位示例
/* 父容器设置相对定位，作为绝对定位的参考系 */
.parent {
width: 300px;
height: 300px;
background-color: #e4e7ed;
position: relative;
}
/* 绝对定位子元素 */
.absolute-box {
width: 100px;
height: 100px;
background-color: #67c23a;
position: absolute;
top: 50px;
left: 50px;
}
/* 后续占位元素 */
.inner-next {
width: 100px;
height: 100px;
background-color: #e6a23c;
}上述代码中，绿色盒子设置绝对定位后，参考父容器的边界偏移，完全脱离文档流，父容器内的橙色盒子会排在绿色盒子原本的位置，填补其空出的空间。
使用场景建议
根据两者的特性，可以结合实际需求选择使用：
- 相对定位适合需要微调元素位置，同时不希望影响其他元素布局的场景，比如给元素添加小偏移、作为绝对定位元素的参考容器。
- 绝对定位适合需要让元素脱离文档流，相对于某个容器精准定位的场景，比如弹窗、悬浮按钮、图标角标等组件的实现。
css相对定位css绝对定位position属性定位偏移修改时间：2026-06-07 03:01:03