HTML5并没有单独的图片重叠元素，所谓层叠效果通常是借助CSS定位、Grid布局或负边距让多张图片位于同一视觉区域。把容器设置成定位上下文，再调整图片的偏移量与堆叠顺序，就能实现稳定的叠放。实际项目中，除了静态展示，还要考虑响应式缩放、点击区域与加载顺序。
一、基础方式：相对定位容器与绝对定位图片
最直接的图片重叠做法是让父容器建立定位上下文，再让其中一张或多张图片脱离文档流。父容器使用position:relative，子级图片使用position:absolute。绝对定位的元素会相对于最近的非static祖先定位，如果父容器不设置relative，图片就会相对于浏览器视口定位，这在复杂页面中很容易跑偏。
为了让重叠后的图片在不同屏幕尺寸下保持比例，建议给图片设置object-fit:cover，同时给容器一个明确宽高。上层图片可以通过top、left、right、bottom或inset控制偏移量，这些偏移量既可以是像素值，也可以是百分比。百分比相对于父容器尺寸计算，更适合弹性布局。
<div class="image-stack"> <img src="bottom.jpg" class="stack-bottom" alt="底层风景图"> <img src="top.jpg" class="stack-top" alt="上层装饰图"> </div>
.image-stack {
position: relative;
width: 400px;
height: 300px;
}
.stack-bottom,
.stack-top {
display: block;
object-fit: cover;
}
.stack-bottom {
width: 100%;
height: 100%;
}
.stack-top {
position: absolute;
top: 30px;
left: 40px;
width: 60%;
height: auto;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
这种方式的优势在于结构清晰，底层图片占据容器自然尺寸，上层图片只负责叠加展示。需要额外注意，绝对定位的图片不再参与父容器高度计算，因此父容器必须自行声明高度，否则会塌陷。如果上层图片较大，还要考虑溢出控制，可以给父容器加overflow:hidden，或者让上层图片使用max-width与max-height限制尺寸。
二、Grid布局让图片自然重叠
CSS Grid提供了另一种更简洁的图片重叠思路：把多张图片放进同一个单元格。默认情况下，Grid子项会按顺序分配到不同单元格，但只要显式声明grid-column和grid-row相同，多个子项就会堆叠在同一区域。这种方法不需要绝对定位，布局仍然由文档流控制，容器的宽高可以更灵活地自适应内容。
相比绝对定位，Grid堆叠的好处是不用手动设置父容器高度，子项中最高的一张图片会自然撑开容器。堆叠顺序由DOM先后决定，后面的图片默认显示在前面；如果需要调整，同样可以使用z-index。对于需要批量叠加卡片、标签图片或装饰元素的场景，Grid写法更易维护。
<div class="grid-stack"> <img src="layer1.jpg" class="grid-layer" alt="底图"> <img src="layer2.jpg" class="grid-layer is-main" alt="前景人物"> </div>
.grid-stack {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
width: min(100%, 520px);
}
.grid-layer {
grid-column: 1;
grid-row: 1;
max-width: 100%;
display: block;
}
.is-main {
align-self: end;
justify-self: center;
width: 70%;
margin-bottom: 10px;
}
在这个示例中，两张图片被强制放在第一行第一列，上层图片通过align-self和justify-self控制自身在单元格内的位置。如果想让上层图片铺满整个单元格，直接设置width:100%和height:100%即可。Grid还支持place-items、place-self等简写属性，能让重叠定位更加直观。
三、负边距与transform微调层叠
不需要绝对定位，也可以利用负外边距让图片在文档流内发生重叠。比如横向排列的一组图片，通过margin-left:-40px让后一张图片压住前一张的一部分。这种方式常用来做头像堆叠、卡片列表或产品缩略图展示。图片仍然保留在文档流中，因此容器高度和宽度由所有图片共同决定，不会出现绝对定位导致的父容器塌陷问题。
配合transform:translateY()或rotate()可以进一步制造错落感。transform只改变视觉渲染位置，不改变实际布局占位，所以很适合做轻微装饰性偏移。需要注意的是，transform会创建新的层叠上下文，如果同一容器内还有z-index控制，排查层级问题时要考虑这一点。
<div class="overlap-flow"> <img src="card1.jpg" class="flow-item" alt="卡片一"> <img src="card2.jpg" class="flow-item is-offset" alt="卡片二"> <img src="card3.jpg" class="flow-item is-offset" alt="卡片三"> </div>
.overlap-flow {
display: flex;
align-items: center;
padding: 20px;
background: #f7f7f7;
}
.flow-item {
width: 120px;
height: 160px;
object-fit: cover;
border-radius: 12px;
border: 3px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.flow-item + .flow-item {
margin-left: -40px;
}
.flow-item:nth-child(2) {
transform: translateY(-10px) rotate(-3deg);
}
.flow-item:nth-child(3) {
transform: translateY(8px) rotate(2deg);
}
这种实现方式代码量少，交互上也更符合直觉，因为图片仍然占据自身布局空间。缺点是重叠的宽度由负边距固定，如果图片尺寸变化明显，需要同步调整负边距。可以通过CSS变量统一维护重叠量，例如--overlap:40px，后续在媒体查询中修改一个变量即可适配不同屏幕。
四、z-index层级管理与响应式注意事项
无论使用哪种重叠方案，层级控制都绕不开z-index。它只对定位元素、flex子项或grid子项生效，普通文档流中的静态元素设置z-index没有效果。图片堆叠时，建议按照层级从低到高设置z-index:1、z-index:2、z-index:3，避免使用999、9999这类难以维护的数值。这样后续插入新层时不需要大幅调整现有值。
z-index的生效范围还受层叠上下文限制。父元素如果设置了transform、filter、opacity小于1、will-change等属性，会创建新的层叠上下文。此时子元素无论z-index多大，都无法跑到其他层叠上下文中的元素上方。调试时如果发现层级不生效，优先检查各级容器是否创建了层叠上下文。
.layer-top {
position: absolute;
z-index: 10;
}
.layer-middle {
position: absolute;
z-index: 5;
}
.layer-bottom {
position: relative;
z-index: 1;
}
@media (max-width: 640px) {
.image-stack .stack-top {
top: 10px;
left: 10px;
width: 75%;
}
}
响应式场景下，固定的像素偏移量在手机屏幕上会显得过大。移动端适配时，建议把偏移量改为百分比或使用clamp()函数限制范围。如果重叠图片中底层图片带有点击事件，而上层图片只是装饰，可以给上层图片设置pointer-events:none，这样点击事件会穿透到下层图片。如果上层图片本身需要交互，就保留默认的pointer-events:auto，但要确保其点击区域不会意外遮挡其他功能按钮。
综合来看，HTML5图片层叠效果并没有唯一的实现方式。绝对定位适合精确控制，Grid布局适合结构化堆叠，负边距加transform适合文档流内的视觉叠加。选择哪种方案取决于设计需求和后续维护成本。建议在一个项目中统一使用一两种方案，避免混用后导致层级关系难以追踪。