z-index无效是因为元素未定位（position: static默认值），必须配合position: relative/absolute等才生效；父容器设opacity、transform等会创建新层叠上下文，使子元素z-index仅在内部有效。
为什么只写 z-index 却没叠起来
因为 z-index 在 position: static（默认值）下完全无效。浏览器只对「定位元素」应用层叠控制。常见错误是给卡片加了 z-index: 3，但没配 position，结果所有卡片还在同一层平铺。
必须同时设置：position: relative（最常用）或 position: absolute。前者不脱离文档流，适合顺序排列的卡片堆；后者需确保父容器有 position: relative，否则会相对于视口定位，容易错位。
注意：如果某张卡片的父容器设置了 opacity: 0.99、transform 或 will-change，它会意外创建新的 stacking context——这时内部卡片的 z-index 只在该上下文内生效，外部卡片再高也盖不住它。
negative-margin 怎么选方向和数值才自然
方向取决于你想露出哪一部分：想让后一张卡片向上叠、露出前一张的底部？用 margin-top: -12px；想向左叠、露出右侧？用 margin-left: -16px。别用正数 margin，那会把整组卡片推离基线，堆叠错位。
数值不是越负越好：
- 典型安全范围是 -8px 到 -24px，-12px 是较稳妥的起始点
- 如果卡片有 border-radius 或 box-shadow，过大的负边距会导致圆角被裁切、阴影重叠发虚
- 若卡片用了 box-sizing: border-box，要确认 padding 没干扰视觉厚度感
调试时建议先关掉所有 transition，用 DevTools 直接看 computed 的 margin 和 z-index 值，比猜更快。
如何避免 z-index 编号混乱和后续插入冲突
手动写 z-index: 1、z-index: 2、z-index: 100 看似能用，但一旦要在中间插入新卡片，编号就得全改。更稳的做法是用 CSS 选择器自动推导：
.card { position: relative; z-index: 1; }.card + .card { z-index: 2; }.card + .card + .card { z-index: 3; }
或者用自定义属性统一管理（需 JS 配合更新）：--card-z: 1;，再通过 z-index: calc(var(--card-z) + 1) 动态生成
纯 CSS 场景下，相邻兄弟选择器最可靠——它不依赖 DOM 顺序编号，只认结构关系，增删卡片不影响层级逻辑。
用 transform: translateY() 替 top 更干净
top: -8px 虽然能偏移，但它仍参与盒模型计算：可能影响父容器高度判断、触发 margin collapse、干扰响应式断点。而 transform: translateY(-8px) 完全不改变文档流，动画也走 GPU 加速，hover 时更流畅。
关键点：
- transform 不影响 z-index 排序逻辑，层级仍由 z-index + position 决定
- 可以和 transition: transform 0.3s ease 组合，性能优于 margin 动画
- 多张卡片同时 hover 时，记得重置其他卡片的 z-index，否则新卡片可能被旧的高 z-index 卡片挡住
最容易被忽略的是 stacking context 的隐性触发——哪怕只是给父容器加了个 filter: blur(1px)，就足以让整组卡片“自成一国”，外部控制失效。做复杂堆叠时，先检查 computed styles 里的 stacking context 是否意外分裂，比反复调 z-index 数值更治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
