CSS的relative和absolute定位是构建复杂页面布局的重要基础，两者配合可以轻松实现元素层叠、位置偏移等效果，在很多卡片、弹窗、徽标等组件的开发中都有广泛应用。
relative和absolute的定位特性
要理解两者如何配合实现层叠布局，首先需要明确各自的定位规则：
- relative相对定位：元素会相对于自身原来的位置进行偏移，偏移后原来的空间仍然保留，不会影响其他元素的正常布局。同时relative会为内部子元素的absolute定位提供参照基准。
- absolute绝对定位：元素会脱离正常文档流，不再占据原来的空间，其定位是相对于最近的开启了定位（position值不为static）的祖先元素，如果没有这样的祖先，则相对于初始包含块（通常是html根元素）定位。
两者配合实现层叠布局的核心逻辑
实现层叠布局的关键步骤只有两步：
- 给需要作为定位参照的父容器设置
position: relative，不需要设置偏移量，只需要开启定位属性即可。 - 给需要层叠在父容器内部的子元素设置
position: absolute，再通过top、right、bottom、left属性调整子元素的位置，子元素会相对于父容器进行定位，自然就形成了层叠效果。
absolute定位的元素可以通过z-index属性调整层叠顺序，z-index值越大的元素会显示在越上层，默认情况下后写的absolute元素会覆盖先写的absolute元素。
完整代码示例
基础层叠布局示例
下面的代码实现了一个卡片容器，内部有一个封面图和一个悬浮在右下角的操作按钮，按钮通过relative和absolute配合实现层叠效果：
/* 父容器开启相对定位 */
.card-container {
position: relative;
width: 300px;
height: 400px;
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
}
/* 封面图占满容器 */
.cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 操作按钮绝对定位，相对于卡片容器偏移 */
.action-btn {
position: absolute;
right: 16px;
bottom: 16px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #1677ff;
color: #fff;
border: none;
cursor: pointer;
/* 让按钮显示在封面图上层 */
z-index: 2;
}
<div class="card-container">
<img class="cover-img" src="https://ipipp.com/cover.jpg" alt="卡片封面">
<button class="action-btn">编辑</button>
</div>
多层元素层叠示例
如果需要实现多个元素层叠，只需要在同一个relative父容器内添加多个absolute子元素，调整各自的位置和z-index即可：
.layer-box {
position: relative;
width: 400px;
height: 300px;
background-color: #f5f5f5;
}
/* 底层元素 */
.layer-bottom {
position: absolute;
top: 20px;
left: 20px;
width: 360px;
height: 260px;
background-color: #fff;
border: 1px solid #ddd;
z-index: 1;
}
/* 中间层元素 */
.layer-middle {
position: absolute;
top: 40px;
left: 40px;
width: 320px;
height: 220px;
background-color: #e6f4ff;
z-index: 2;
}
/* 顶层元素 */
.layer-top {
position: absolute;
top: 60px;
left: 60px;
width: 280px;
height: 180px;
background-color: #bae0ff;
z-index: 3;
}
<div class="layer-box">
<div class="layer-bottom">底层内容</div>
<div class="layer-middle">中间层内容</div>
<div class="layer-top">顶层内容</div>
</div>
注意事项
- 如果父容器设置了
overflow: hidden，超出父容器范围的absolute子元素会被裁剪，需要根据实际需求调整父容器的overflow属性。 - absolute元素完全脱离文档流，不会参与父容器的高度计算，如果父容器没有设置固定高度，可能会出现高度塌陷的问题，需要提前给父容器设置明确高度或者最小高度。
- z-index只对定位元素（position值不为static）生效，普通文档流的元素设置z-index不会有任何效果。