单用 z-index 无法实现真正层叠，因绝对定位元素默认重合于左上角；必须配合 position: relative 的父容器、transform 偏移及分层阴影。
为什么单用 z-index 无法让卡片真正“层叠”起来
很多人给多个卡片设了 position: absolute 和不同 z-index，却发现它们还是堆在同一个位置、看不出深度。根本原因是：绝对定位元素默认 top: 0; left: 0，所有卡片都锚在容器左上角，z-index 只控制谁在上面，不解决“错开”这个视觉层叠的前提。
真实层叠必须包含三个要素：位置偏移（制造错位）、层级顺序（z-index）、深度暗示（如阴影、缩放、透明度）。缺一不可。
- 没偏移 → 所有卡片重合，
z-index再大也只看到最上层那一张 -
z-index值相同或未声明 → 浏览器按 HTML 顺序渲染，后写的盖前面的，但不可控 - 忽略父容器定位上下文 → 子元素会相对于
body定位，导致偏移完全失控
position: relative 必须加在父容器上，不是可选项
这是最常被跳过的一步。如果父容器没设 position: relative（或 absolute/fixed），所有 position: absolute 的卡片就会向上逐级查找已定位祖先，最终以 viewport 为基准定位——这意味着你写的 top: 10px 实际是从浏览器顶部往下 10px，和卡片容器毫无关系。
正确写法：
.card-container {
position: relative;
width: 300px;
height: 200px;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 父容器
position: relative不改变自身布局，但为子元素创建了局部坐标系 - 删掉这行，
top/left就失去参照，调试时会发现卡片飘到页面任意角落 - 不要用
position: static（默认值）或position: sticky替代，它们不创建新的定位上下文
用 transform 替代纯 top/left 偏移更安全
直接改 top 和 left 会触发 layout（重排），尤其在 hover 动画中容易卡顿；而 transform: translate() 只影响合成层，性能更好，且能自然配合 transition。
示例（三层卡片悬浮）：
.card-1 { z-index: 1; transform: translate(0, 0); }
.card-2 { z-index: 2; transform: translate(8px, -6px); }
.card-3 { z-index: 3; transform: translate(16px, -12px); }
.card-container:hover .card-1 {
transform: translate(4px, -2px);
}
.card-container:hover .card-2 {
transform: translate(12px, -8px);
}
.card-container:hover .card-3 {
transform: translate(20px, -14px);
}
- 初始状态就用
transform错开，避免布局抖动 - hover 时每层偏移量递增，强化“逐层浮起”的物理感
- 慎用
transform: scale()单独放大某一层——它会改变元素尺寸，可能撑破容器或遮挡内容
阴影和透明度必须分层控制，不能只靠 box-shadow
单层 box-shadow 是扁平贴图，无法模拟底部主影 + 侧边斜影 + 顶部反光这种多向光效。要真实，就得把每层阴影拆成独立伪元素或额外 DOM 节点。
推荐做法（不新增 DOM）：
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.card::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 90%;
height: 90%;
z-index: -2;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
-
::before模拟环境漫反射，扩散大、颜色深、无偏移 -
::after模拟主光源斜射，小偏移 + 中等模糊，放在更下层（z-index: -2）才显得“压”在卡片下面 - 卡片本体保留轻微
box-shadow或纯边框，用于强化轮廓，别让它抢了伪元素的戏
z-index 必须和卡片本身形成完整栈，否则伪元素可能被其他卡片遮住；而一旦父容器设置了 opacity、transform 或 will-change，就会创建新层叠上下文，导致子元素的 z-index 失效——这点几乎没人检查，却常是阴影突然消失的根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
