z-index 配合 negative-margin 能实现卡片叠层翻页效果，因 z-index 控制绘制顺序，negative-margin 使后卡向上/左偏移以视觉叠压前卡，但必须配合 position（如 relative/absolute）才能生效。
为什么 z-index 配合 negative-margin 能做出卡片叠层翻页效果
因为 z-index 控制绘制顺序，negative-margin 让后一个卡片“向上/向左挪动”，视觉上盖住前一个卡片的底部或右侧，形成自然叠压。关键在于：两者必须配合定位（position: relative 或 absolute）才能让 z-index 生效；否则 negative-margin 只会推挤布局，不产生层叠。
必须加 position 才能让 z-index 生效
常见错误是只写 z-index: 2 却没设 position，结果完全没反应。浏览器只对「定位元素」应用 z-index。
-
position: relative最常用——不脱离文档流，适合卡片在容器内依次排列 - 避免用
position: static（默认值），此时z-index被忽略 - 如果卡片需脱离父容器定位（比如全屏翻页），改用
position: absolute，但要确保父容器有position: relative
negative-margin 的方向和数值怎么选
方向取决于你想叠哪边：想露出上一张卡片的底部？用 margin-top: -20px；想露出左边？用 margin-left: -16px。数值不是越小越好，得匹配卡片的视觉厚度感和交互反馈。
- 典型值在
-8px到-24px之间，-12px是较安全的起始点 - 如果卡片有
border-radius或阴影，negative-margin过大会导致边缘被裁切或阴影重叠异常 - 配合
transition: margin 0.3s ease可让移动更平滑，但注意：margin动画性能不如transform，大量卡片时慎用
z-index 序列必须严格递增且无跳跃
卡片从前往后叠，意味着 DOM 顺序靠后的卡片应有更高的 z-index，比如：z-index: 1、z-index: 2、z-index: 3。跳着写（如 1、5、100）看似没问题，但后续插入新卡片时极易冲突。
- 用 CSS 自定义属性统一管理：
--card-z: 1，再通过z-index: calc(var(--card-z) + 1)推导（需 JS 配合） - 纯 CSS 场景下，建议用相邻兄弟选择器控制：给
.card + .card设更高z-index，避免手动编号 - 注意 stacking context：如果某张卡片父容器有
opacity: 0.99或transform，它会创建新层叠上下文，导致内部z-index重新计数——这时外部卡片可能盖不住它
实际效果是否自然，往往卡在 stacking context 是否意外被触发，以及 negative-margin 是否和卡片的 box-sizing、padding 冲突。调试时先关掉所有动画，用 DevTools 检查每一层的 computed z-index 和 margin 值，比猜更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
