在网页布局中实现两张图片叠加，核心是通过css控制元素的定位关系和层叠顺序，让两张图片在页面同一区域展示，上层图片覆盖下层部分或全部内容。这种效果常用于制作图片水印、悬浮标签、动态切换背景等场景。
方案一：使用position定位实现叠加
这是最常用的图片叠加实现方式，通过相对定位和绝对定位的配合，让上层图片相对于下层图片的容器进行定位，从而实现叠加效果。
实现步骤
- 给两张图片的共同父容器设置
position: relative，作为定位参考系 - 给两张图片都设置
position: absolute，脱离文档流，避免占据原有布局空间 - 通过
top、left等属性调整上层图片的位置，通过z-index控制层叠顺序，数值更大的元素显示在上层
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.img-container {
position: relative;
width: 500px;
height: 300px;
}
.base-img {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.overlay-img {
position: absolute;
width: 200px;
height: 150px;
top: 50px;
left: 100px;
z-index: 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>
方案二：使用grid布局实现叠加
如果父容器使用grid布局，可以让多个子元素共享同一个网格区域，从而实现叠加效果，这种方式不需要设置绝对定位，布局逻辑更简洁。
实现步骤
- 给父容器设置
display: grid，开启网格布局 - 给两张图片设置相同的
grid-area属性值，让它们都放置在同一个网格区域中 - 同样通过
z-index控制两张图片的层叠顺序
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.img-container {
display: grid;
width: 500px;
height: 300px;
}
.base-img {
grid-area: 1 / 1 / 2 / 2;
width: 100%;
height: 100%;
z-index: 1;
}
.overlay-img {
grid-area: 1 / 1 / 2 / 2;
width: 200px;
height: 150px;
justify-self: center;
align-self: center;
z-index: 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不会生效 - 如果叠加的图片需要保持比例，可以设置
object-fit: cover或者object-fit: contain属性，避免图片拉伸变形 - 如果上层图片需要半透明效果，可以给上层图片设置
opacity属性，比如opacity: 0.7，实现半透明叠加效果
两种方案对比
| 方案 | 优点 | 适用场景 |
|---|---|---|
| position定位 | 兼容性更好，支持所有现代浏览器和旧版本浏览器 | 需要精确控制叠加位置，或者需要兼容旧浏览器的场景 |
| grid布局 | 代码更简洁，不需要额外设置定位偏移属性 | 不需要兼容旧浏览器，且父容器本身使用grid布局的场景 |
css图片叠加position定位z_index层叠上下文修改时间：2026-06-13 18:00:28