在网页开发中，实现图片精确层叠效果需要熟练运用CSS的相对定位与绝对定位，同时配合层叠顺序相关属性完成布局。两种定位方式各有适用场景，合理搭配才能精准控制图片的位置和显示层级。
CSS相对定位与绝对定位的核心特性
相对定位（relative）
相对定位的元素会相对于自身原本在文档流中的位置进行偏移，偏移后原本的文档流空间仍然保留，不会影响其他元素的布局位置。设置position:relative后，可通过top、right、bottom、left四个属性调整元素偏移量。
绝对定位（absolute）
绝对定位的元素会脱离文档流，不再占据原本的布局空间，其定位参考对象是最近的已定位（position值不为static）祖先元素，如果不存在这样的祖先元素，则会相对于初始包含块（通常是html根元素）定位。同样通过top、right、bottom、left属性设置具体位置。
图片层叠的核心实现逻辑
实现多张图片层叠时，通常需要一个容器作为定位参考，内部放置需要层叠的图片元素。容器设置相对定位，作为绝对定位图片的参考对象，图片设置绝对定位后可通过偏移属性调整在容器内的位置，再通过z-index属性控制层叠顺序，数值越大的元素显示在越上层。
完整代码示例
下面是一个实现两张图片层叠，且第二张图片叠加在第一张图片右上角的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片层叠示例</title>
<style>
/* 定位容器，设置相对定位作为参考 */
.img-container {
position: relative;
width: 600px;
height: 400px;
border: 1px solid #ccc;
margin: 20px auto;
}
/* 底层图片，占满容器 */
.base-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 层叠图片，绝对定位，设置偏移和层级 */
.overlay-img {
position: absolute;
top: 20px;
right: 20px;
width: 150px;
height: 150px;
border-radius: 8px;
z-index: 2; /* 层级高于底层图片 */
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="img-container">
<img class="base-img" src="https://ipipp.com/base.jpg" alt="底层背景图">
<img class="overlay-img" src="https://ipipp.com/overlay.jpg" alt="层叠装饰图">
</div>
</body>
</html>注意事项
- 绝对定位元素的参考对象必须是已定位的祖先元素，否则会相对于页面根元素定位，导致位置不符合预期。
- z-index属性仅对定位元素（position值不为static）生效，未设置定位的元素设置z-index不会有层叠效果。
- 如果层叠的图片需要响应式适配，可结合百分比设置偏移量和尺寸，避免固定像素值在不同屏幕尺寸下出现错位。
- 当多个定位元素的z-index数值相同时，后渲染的元素会显示在上层，可通过调整HTML结构顺序或明确设置z-index数值避免层级混乱。
CSS_relative定位CSS_absolute定位图片层叠定位属性z-index修改时间：2026-06-04 18:37:38