纯css无法实现真正可用的探探式卡片堆叠效果，必须用js动态控制z-index、transform及定位；静态z-index和top值无法响应滑动、缩放、横竖屏等变化；卡片需absolute定位在relative容器内，且所有偏移和层级均由js实时计算更新。
纯 CSS 无法实现真正可用的“类似探探”的卡片滑动堆叠效果——它必须依赖 JS 动态更新 z-index 和 transform，否则滑动、回弹、层级重排全会失效。
为什么 position: relative + z-index 数组静态写死就崩
很多人照着教程写：.card:nth-child(1) { z-index: 1; top: 0; }、.card:nth-child(2) { z-index: 2; top: -8px; }……这在内容固定、无交互、不响应式时看似能堆起来，但实际一动就露馅：
- 滑动移除顶部卡片后，第二张不会自动“升顶”——
z-index是静态规则，浏览器不会重算 DOM 序号 - 用户缩放字体或加载图片后，卡片高度变化，
top: -8px就错位，堆叠基线漂移 - 移动端横竖屏切换，硬编码的偏移值完全不适应容器宽度变化
-
z-index在不同父容器中互不感知：如果某张卡被包进一个position: relative的.featured-wrapper里，它的z-index: 99只在该 wrapper 内有效，压不住同级其他卡片
真正起作用的定位组合是 absolute + relative 容器 + JS 驱动
所谓“用 relative 实现堆叠”，只是初学者误读。探探式效果的底层结构必然是：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器设
position: relative，作为所有卡片的定位参考系 - 每张卡片设
position: absolute，且统一top: 0; left: 0;起始位置 -
z-index值由 JS 按当前可视顺序实时注入（例如顶层卡style.zIndex = "10"，下一张"9"） - 偏移靠
style.transform = "translateX(24px) translateY(-12px) scale(0.96)"，不是top/left
关键点：position: relative 在这里只服务于父容器，不是给卡片用的；卡片必须 absolute 才能精准叠在同一视觉锚点上，否则文档流残留会导致滑动错帧。
z-index 数组不是 CSS 类名，而是运行时状态映射
所谓“z-index 数组”，指的是 JS 中维护的一个整数序列，比如 [10, 9, 8, 7]，它和 DOM 顺序严格一一对应，并随操作实时重排：
- 用户左滑移除第一张 → 数组变为
[9, 8, 7]→ JS 批量更新剩余卡片的style.zIndex - 不能只改被滑动那张的
z-index，否则下一张仍卡在z-index: 2，被后面更高值的卡片盖住 - 避免用
z-index: 9999这类魔数——留出余量（如最大用到 50），方便后续插入动画层、tooltip、loading overlay 等 - 移动端 Safari 对快速连续
z-index变更有延迟，建议搭配will-change: transform提前提示渲染优化
最容易被忽略的兼容性雷区
即使逻辑写对，以下三点不做处理，iOS 微信 WebView 和旧版 Safari 就直接白屏或堆叠错乱：
- 父容器不能设
overflow: hidden—— 它会静默截断transform: translateY(-12px)的渲染区域，上层卡片被砍掉一部分 - 不要用
scroll-timeline驱动堆叠动画——Safari 和 Firefox 完全不支持，且无法 fallback 到 JS 逻辑 - 所有
transform必须带单位（translateX(24px)），不能写translateX(24)，iOS Safari 会忽略无单位值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
