使用CSS Grid结合grid-row、grid-column和z-index可实现卡片重叠效果。通过设置网格行列范围使卡片定位并部分重叠，再用position和z-index控制层叠顺序，如卡片A（grid-row: 1/3, z-index: 2）覆盖卡片B（grid-row: 2/4, z-index: 1），形成视觉层次。需确保容器为display: grid，合理定义网格结构与定位属性，可辅以负margin增强重叠感，响应式中可用媒体查询调整布局，保持z-index层级清晰便于维护。
要实现卡片重叠效果，CSS Grid 提供了非常灵活的布局控制能力。通过 grid-row 和 grid-column 定位元素位置，再结合 z-index 控制层叠顺序，可以轻松创建视觉上有层次感的卡片堆叠布局。
使用 grid-row 和 grid-column 精确定位卡片
在 Grid 容器中，你可以让多个网格项（卡片）占据相同或部分重叠的网格区域。通过指定 grid-row 和 grid-column 的起始和结束线，控制每个卡片的位置。
例如：- 卡片 A 设置为 grid-row: 1 / 3; grid-column: 1 / 3;，占据第一行到第二行，第一列到第二列。
- 卡片 B 设置为 grid-row: 2 / 4; grid-column: 2 / 4;，从第二行开始，与卡片 A 部分重叠。
这样两个卡片就会在中间区域产生重叠。
用 z-index 控制谁在上层
默认情况下，后渲染的元素会显示在上方。但为了精确控制哪张卡片在前面，需要设置 position 属性（如 relative、absolute）并配合 z-index。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给需要前置的卡片设置 position: relative; z-index: 2;
- 被覆盖的卡片可设为 position: relative; z-index: 1;
注意：只有定位元素（非 static）的 z-index 才会生效。
实际示例代码
HTML 结构：
<div class="grid-container"> <div class="card card-a">卡片 A</div> <div class="card card-b">卡片 B</div> </div>
CSS 样式：
.grid-container {
display: grid;
grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(4, 80px);
gap: 10px;
}
.card {
position: relative;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 20px;
}
.card-a {
grid-row: 1 / 3;
grid-column: 1 / 3;
background: #ff7eb9;
z-index: 2;
}
.card-b {
grid-row: 2 / 4;
grid-column: 2 / 4;
background: #7ec0ff;
z-index: 1;
}
这样，卡片 A 会在视觉上前置，部分覆盖卡片 B，形成自然的重叠效果。
小技巧与注意事项
- 确保父容器设置了 display: grid 并定义了行列结构。
- 合理使用负边距（margin）可以让重叠更明显，比如 margin: -20px 0;。
- 在响应式设计中，可用媒体查询调整 grid-row/column 或 z-index 以适配不同屏幕。
- 避免过多高 z-index 值，保持层级清晰，便于维护。
基本上就这些。掌握 grid 定位与层叠控制，就能做出富有设计感的卡片堆叠布局。不复杂但容易忽略细节。
