答案：通过float布局实现卡片并排与重叠，结合position: relative和z-index控制层叠顺序，利用负margin实现部分重叠，hover时提升z-index并增强box-shadow以实现立体交互效果。
使用CSS的float结合z-index实现卡片堆叠效果，关键在于理解浮动元素的层叠上下文和定位机制。虽然float本身不会创建新的层叠上下文，但通过配合position属性和z-index，可以精确控制卡片的堆叠顺序和视觉层级。
1. 基础结构与浮动布局
卡片堆叠通常从左到右或交错排列，float可让多个卡片并排显示，自动换行。
- 给卡片设置
float: left，使其水平排列 - 设定固定宽度，避免撑满容器
- 使用
margin制造间距或重叠效果
示例代码：
.card {
float: left;
width: 200px;
height: 120px;
margin-left: -50px; /* 实现部分重叠 */
background: #fff;
border: 1px solid #ddd;
}
.card:first-child {
margin-left: 0; /* 第一个不偏移 */
}
2. 使用z-index控制堆叠层级
z-index仅对定位元素（position值为relative、absolute或fixed）生效。因此必须为浮动卡片添加position: relative才能启用z-index。
立即学习“前端免费学习笔记（深入）”；
- 给卡片添加
position: relative - 通过
z-index设置数值，数值越大越靠前 - 可结合:hover提升当前卡片层级，实现“点击置顶”效果
示例代码：
.card {
float: left;
width: 200px;
height: 120px;
margin-left: -40px;
position: relative;
z-index: 1;
}
<p>.card:hover {
z-index: 10; /<em> 鼠标悬停时显示在最上层 </em>/
}</p>3. 实现视觉深度与交互反馈
通过调整z-index和box-shadow，增强卡片的立体感和交互体验。
- 后方卡片
z-index设低，加阴影表现被遮挡 - 前方卡片提升
z-index，阴影更明显 - 利用CSS过渡（transition）实现平滑层级变化
增强样式示例：
.card {
transition: z-index 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
<p>.card:hover {
z-index: 20;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}</p>基本上就这些。用float做布局虽较传统，但在简单堆叠场景中依然有效。关键是记得给元素加position: relative才能让z-index起作用。不复杂但容易忽略。
