用position: relative配合z-index控制堆叠顺序，需确保元素定位；通过transform位移模拟错位效果，box-shadow增强立体感，响应式时需同步调整z-index避免层级错乱。
用 position: relative + z-index 控制堆叠顺序
卡片堆叠不是靠“叠”出来的，而是靠层叠上下文（stacking context）里元素的绘制顺序决定的。最直接的方式是给每张卡片设 position: relative（或 absolute），再用 z-index 显式声明谁在上、谁在下。
注意：z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）生效；普通文档流里的 div 再怎么写 z-index 都没用。
- 堆叠顺序从低到高：默认文档流 →
z-index: 0→z-index: 1→ … - 同级
z-index值相同时，后出现的元素自然盖在前面的上面（HTML 顺序即绘制顺序） - 避免滥用大数值（比如
z-index: 9999），容易引发后续覆盖冲突
加 transform: translateY() 模拟错位堆叠感
纯 z-index 只控制遮挡关系，但视觉上还是平铺的。要做出“一张卡微微露出一角”的真实堆叠效果，得配合位移。
常见做法是让每张卡片比前一张往下、往右偏移几像素，同时保持 z-index 递减（确保上层卡不被下层遮住）。例如三张卡从底到顶排列：
立即学习“前端免费学习笔记（深入）”；
.card:nth-child(1) { z-index: 1; }
.card:nth-child(2) { z-index: 2; transform: translateY(-8px) translateX(8px); }
.card:nth-child(3) { z-index: 3; transform: translateY(-16px) translateX(16px); }
这里 transform 不影响文档流，也不会触发重排，比用 margin 或 top/left 更稳妥。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
transform会创建新的层叠上下文，如果父容器已有z-index，子元素的z-index将只在该上下文内生效 - 偏移量建议控制在 4–12px 之间，太大显得松散，太小看不出层次
- 移动端要注意
transform可能导致部分安卓 WebView 渲染模糊，可加backface-visibility: hidden缓解
用 box-shadow 强化立体感，别只靠颜色
堆叠效果是否可信，关键不在位置，而在阴影。单靠位移+遮挡，看起来还是扁平的；加上恰当的阴影，才能让人脑自动补出“厚度”。
推荐给每张卡片加轻微扩散阴影，且越上层的卡阴影越浅、越柔和（模拟离投影面更近）：
.card:nth-child(1) { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card:nth-child(2) { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.card:nth-child(3) { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
- 避免所有卡片用同一套
box-shadow，那样就失去深度暗示了 - 慎用
inset阴影，它会让卡片看起来“陷进去”，和堆叠意图相反 - 阴影颜色别太深（如
rgba(0,0,0,0.3)以上），否则像脏边，不是立体感
响应式堆叠时，z-index 顺序可能意外翻转
在媒体查询里调整卡片布局（比如从横向堆叠切到纵向堆叠）时，如果只改 transform 不同步调 z-index，很容易出现上层卡被下层挡住——因为 HTML 顺序没变，而视觉位置变了。
典型场景：桌面端三张卡左→右错位堆叠，移动端改成竖向排列，但 z-index 还按原顺序，结果最下面那张反而盖住了上面的。
- 响应式切换时，优先用
flex-direction或grid重构布局，而不是仅靠transform移动 - 如果必须保留堆叠结构，记得在断点里重置
z-index，例如移动端统一设为z-index: auto，靠 DOM 顺序控制 - 调试时打开浏览器开发者工具的“Layers”面板（Chrome DevTools > Rendering > Layers），能直观看到实际层叠树
真正难的不是让三张卡叠起来，而是让它们在不同尺寸、不同交互状态（hover/active）、不同父容器 stacking context 下，始终维持预期的视觉层级。动手前先想清楚：谁该永远在最上？有没有动态插入新卡片的需求？这些决定了你是用静态 z-index 还是 JS 动态管理。
