不能只用 Grid 实现重叠+响应式，因其不负责层叠且小屏下易错位消失；应以 position: absolute + z-index 做组内重叠，外层用 Grid/Flex 控制“重叠组”换行。
直接用 position: absolute + z-index 做重叠，再套一层 display: grid 或 display: flex 控制整体排列，是最可控、最易响应的组合。别试图用纯 Grid 或纯 Flex 搞“重叠+自适应”两件事——它们天生不负责层叠，硬塞会掉坑里。
为什么不能只用 Grid 实现重叠+响应式
Grid 确实能通过 grid-area 把多张图塞进同一个格子，但问题在于：一旦容器宽度变化（比如小屏），grid-template-columns 重新计算列数时，所有重叠组可能被强行拆散、错位，甚至部分图片消失（因未设 min-width 或 aspect-ratio）。更麻烦的是，z-index 在 Grid item 上虽可用，但若父容器触发了新 stacking context（比如加了 filter 或 opacity），层级就全乱了。
常见错误现象：z-index 写了没反应、小屏下重叠变单列、某张图突然跑到页面左上角
- 必须确保重叠区域的父容器设
position: relative，否则position: absolute的图片会相对于body定位 - 重叠组内部用
position: absolute+top: 0; left: 0对齐，外部用 Grid/Flex 控制每组的位置和换行 - 每组重叠图建议统一宽高（如
width: 100%; height: 200px;），并配object-fit: cover防拉伸
怎么让重叠组本身响应式换行
把每组重叠图（含 position: relative 容器）当作一个“原子单元”，用 display: grid 或 display: flex 排列这些单元，而不是排单张图。
推荐用 Grid：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.image-stack {
position: relative;
width: 100%;
height: 200px;
}
.image-stack img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
关键点：
-
.image-stack是每个重叠组的包裹容器，它必须设position: relative和显式宽高（或aspect-ratio），否则内部absolute图片会让它塌陷 -
minmax(280px, 1fr)中的280px是整组的最小宽度，不是单图的——这决定了几组能并排 - 别给
img设max-width: 100%，它已在absolute下占满父容器，加了反而可能干扰object-fit
z-index 失效的三个高频原因
写了 z-index: 999 却盖不住另一张图？大概率卡在这三处：
- 漏了
position：对img直接写z-index无效，必须先加position: absolute或position: relative - 父容器创建了新 stacking context：比如
.image-stack加了transform: scale(0.99)或opacity: 0.99，会导致其内部所有z-index只在该组内比较，无法跨组盖过隔壁的.image-stack - 数值滥用：一组内用
z-index: 1/2/3就够，别用999和9999——不同组之间靠 DOM 顺序或外层布局控制先后，不是靠堆数字
要不要用 background-image 替代第二张图
如果重叠的第二张图是水印、角标、状态徽章（如 “NEW”、“VIP”）、半透明蒙层，且不需要 alt 文字、不需右键另存、不参与语义化，那就该用 background-image。
好处明显：
- 少一次 HTTP 请求，加载更快
- 天然叠加，不用操心
z-index和定位上下文 - 可直接用
background-position、background-size精控位置和缩放，比img+transform更稳 - 不会因图片加载失败而留白或报错
示例写法：
.image-stack {
position: relative;
width: 100%;
height: 200px;
background-image: url("badge.png");
background-position: top right;
background-size: 40px;
background-repeat: no-repeat;
}
真正难的不是怎么叠，而是判断哪张图该留在文档流里、哪张该抽出来当背景、哪张必须保持语义和可访问性——这个边界划不清，后面所有 z-index 和 grid 都是白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
