必须为元素设置 position（如 relative）z-index 才生效；阶梯堆叠需结合 z-index 递增、transform 错位（如 translatey(-8px) translatex(8px)）、多层 box-shadow 模拟立体感，并注意响应式重置及层叠上下文嵌套问题。
用 position: relative + z-index 控制堆叠顺序，但必须定位才生效
纯 HTML 流里的 div 写 z-index: 999 没用——它只对 position 值为 relative、absolute、fixed 或 sticky 的元素起作用。阶梯堆叠不是靠“叠”出来的，而是靠层叠上下文里绘制顺序决定的。
常见错误：给卡片加了 z-index 却没设 position: relative，结果所有卡片还是按 DOM 顺序平铺盖着，看不出层级。
- 每张卡片必须显式声明
position: relative（或其它定位值） -
z-index从底到顶递增，比如1→2→3 - 同级
z-index相同时，后出现的元素自然压在前面的上面（HTML 顺序即绘制顺序） - 避免写
z-index: 9999这类大数，后续加弹窗、提示框时容易被意外遮住
用 transform 模拟错位，别用 margin 或 top/left
只调 z-index 是平面遮挡，不是“阶梯感”。真实堆叠需要视觉错位：上层卡微微右偏、上移，露出下层一角。
直接改 margin-top 或 top 会触发重排（reflow），滚动或动画时卡顿明显；transform 是硬件加速属性，不影响文档流，更稳。
- 推荐组合：
transform: translateY(-8px) translateX(8px) - 偏移量控制在
4px–12px之间，太小看不出层次，太大显得松散 - 注意：
transform会创建新的层叠上下文，如果父容器已有z-index，子元素的z-index就只在该上下文内生效 - 部分安卓 WebView 渲染模糊？加
backface-visibility: hidden缓解
用 box-shadow 强化立体感，单靠位移是假立体
人眼识别“厚度”主要靠阴影过渡，不是位置差。没有合适阴影的堆叠，看起来像错位的贴纸，不是卡片。
别只靠颜色深浅或边框模拟深度——那只是平面分隔，不是体积感。
- 建议用多层阴影：
box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08) - 上层卡片阴影要略弱于下层（
opacity更低或blur更小），模拟光线衰减 - 移动端慎用过重阴影，可能影响文字可读性或触发渲染性能问题
响应式时同步调整 z-index 和 transform，否则层级会乱
在小屏下卡片变成单列堆叠，若仍沿用桌面端的 z-index 顺序和位移量，可能上层卡被下层挡住，或者错位过大导致内容溢出。
这不是 bug，是层叠上下文在不同断点下重新计算的结果。
- 用媒体查询重置关键值：
@media (max-width: 768px) { .card:nth-child(2) { z-index: 1; transform: none; } } - 移动端优先考虑触控区域，错位量建议缩小到
4px左右，避免误触相邻卡片 - 测试真机，尤其 iOS Safari 和 Android Chrome，某些旧 WebView 对
transform+z-index组合支持不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
