在数据看板或卡片式界面中，我们常常需要将多张数据卡片以堆叠方式呈现，并通过CSS的z-index属性控制它们的层叠顺序。实现这种效果的核心在于定位上下文与层叠等级的设置。
一、卡片堆叠的基本布局思路
要让卡片堆叠，首先需让它们在同一个位置重叠。通常的做法是将容器设为相对定位，每张卡片设为绝对定位，并给定相同的top与left值。这样所有卡片都会落在容器的同一坐标上，形成堆叠。
1. 容器与卡片结构
HTML结构可以非常简洁，一个外层容器包裹多个卡片元素：
<div class="card-stack"> <div class="card card-1">卡片一</div> <div class="card card-2">卡片二</div> <div class="card card-3">卡片三</div> </div>
2. 基础CSS定位
通过position属性建立定位关系，这是使用z-index的前提：
.card-stack {
position: relative;
width: 300px;
height: 200px;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #ccc;
background: #fff;
}
二、z-index层叠控制原理
z-index只在定位元素（position不为static）上生效，数值越大越靠近用户视线顶层。若未指定z-index，后来居上的元素会自然覆盖前面的元素。
1. 显式设置层叠顺序
我们可以为不同卡片赋予不同z-index，精确控制哪张在上：
.card-1 { z-index: 1; }
.card-2 { z-index: 2; }
.card-3 { z-index: 3; }
此时card-3显示在最前，card-1被压在最底。若动态切换选中卡片，只需用JavaScript修改对应z-index即可。
2. 层叠上下文注意点
当某个父元素创建了层叠上下文（如设置了transform、opacity小于1或flex子项等），其内部z-index只在该上下文内比较。因此堆叠卡片应避免被意外上下文隔离。
三、带偏移的堆叠视觉效果
真实项目中常让卡片略微错开，既有层叠感又可见内容：
.card-1 { z-index: 1; transform: translate(0, 0); }
.card-2 { z-index: 2; transform: translate(10px, 10px); }
.card-3 { z-index: 3; transform: translate(20px, 20px); }
配合box-shadow可强化层次：
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
四、用JS动态提升点击卡片
常见交互是点击某卡片将其置顶，代码如下：
let zTop = 10;
document.querySelectorAll('.card').forEach(function(el) {
el.addEventListener('click', function() {
zTop += 1;
el.style.zIndex = zTop;
});
});
上述逻辑利用变量zTop持续递增，保证被点击的卡片永远获得当前最大z-index。
五、小结
实现数据卡片堆叠并不复杂：先以position建立重叠布局，再用z-index明确层叠等级，必要时通过transform做偏移并配合脚本动态调控。理清层叠上下文边界，就能稳定输出预期的卡片堆叠界面。