用 position: relative 配合 negative-margin 实现多层卡片重叠是轻量可控的首选方案，但必须满足定位生效、z-index 递增、margin 方向与数值匹配视觉厚度三条件。
直接说结论：用 position: relative 配合 negative-margin 实现多层卡片重叠，是轻量、可控、不脱离文档流的首选方案，但必须同时满足三个条件——定位生效、z-index 递增、margin 方向与数值匹配视觉厚度。
为什么只写 negative-margin 没反应
常见错误是给卡片加了 margin-top: -12px 却没设 position: relative。此时负边距只是把卡片往上“推”，后一张会挤开前一张的布局空间，根本不会盖上去。更糟的是，如果所有卡片都用 static（默认）定位，z-index 完全被浏览器忽略，层叠顺序由 DOM 顺序决定，无法精确控制谁在上谁在下。
-
position: relative是前提，它不改变文档流位置，但让元素成为“定位元素”，使z-index和margin可协同工作 - 不要用
position: absolute做这种基础堆叠——它会让卡片脱离流，后续插入新卡片时需手动调top/left，响应式极易崩 - 如果父容器有
overflow: hidden，上移的卡片部分会被裁掉，调试时先关掉它
z-index 和 negative-margin 怎么配才自然
核心逻辑是：后一张卡片既要“盖住前一张的顶部”，又要“看起来像被手拿起来一点”。所以 z-index 必须严格递增，negative-margin 要配合卡片视觉厚度选方向和数值。
- 想露出上一张的底部？用
margin-top: -12px；想露出左边？用margin-left: -8px——方向取决于你希望哪部分被“压出来” -
z-index推荐从 1 开始连续递增：z-index: 1、z-index: 2、z-index: 3，别跳着写（如 1、5、100），否则插入中间卡片时极易冲突 - 数值不是越负越好：
margin-top: -24px可能导致阴影被裁或圆角消失；-8px到-16px是较安全区间，-12px可作为起始测试值 - 如果卡片有
box-sizing: border-box和内边距，negative-margin过大会让内容区域错位，建议用 DevTools 的 computed 面板实时看margin和border-box实际尺寸
容易被忽略的 stacking context 陷阱
你以为 z-index 写对了，结果某张卡片就是盖不住——大概率是它或它的某个父容器意外创建了新的层叠上下文（stacking context）。一旦发生，内部所有 z-index 就只在该上下文内生效，跟外部无关。
- 触发新 stacking context 的常见属性：
opacity小于 1、transform非 none、filter、will-change、perspective - 比如父容器写了
opacity: 0.99，那里面所有卡片的z-index: 100仍可能被外部z-index: 2的导航栏盖住 - 调试时，在 Chrome DevTools 的 Layers 面板里点开每张卡片，看 “Stacking context” 是否被标记为 “isolated”；也可以临时删掉疑似属性，快速验证
- 避免在卡片或其直系父容器上滥用
transform（尤其是 scale 或 rotate），它比position: relative+margin更容易悄悄触发新上下文
真正卡住效果的，往往不是 margin 值没调准，而是某一层父容器悄悄加了个 opacity: 0.99 或 transform: translateZ(0)，让整组卡片被锁进一个独立层级里。动手前先用 DevTools 扫一遍 computed z-index 和 stacking context 状态，比反复改 CSS 高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
