Stack堆叠技术详解与实战应用经验分享

为什么我最近老在折腾 Stack 堆叠？

上周改一个卡片堆叠的交互组件，产品经理说“要像抖音那样滑动切换”，我一开始以为很简单，结果发现不同方案写起来差别巨大。有的用绝对定位硬怼，有的靠 CSS transform，还有人直接上第三方库。折腾完之后，我决定把这几个主流方案拉出来遛一遛，说说哪个更顺手、哪个坑最多。

谁更灵活？谁更省事？

我试了三种主流做法：纯 CSS 定位、CSS transform + z-index 控制、以及用 position: sticky 模拟堆叠。先说结论：日常开发我首选 transform 方案，虽然多写两行 JS，但动画流畅、控制精准，而且不会和父容器的布局打架。

先看最 naive 的方案——纯 CSS 绝对定位：

<div class="stack-container">
  <div class="card" style="top: 0; left: 0; z-index: 3;">Card 1</div>
  <div class="card" style="top: 8px; left: 8px; z-index: 2;">Card 2</div>
  <div class="card" style="top: 16px; left: 16px; z-index: 1;">Card 3</div>
</div>

.stack-container {
  position: relative;
  width: 300px;
}
.card {
  position: absolute;
  width: 100%;
  height: 200px;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

这个方案看起来简单，但问题不少。首先，z-index 是写死的，动态增删卡片时得手动维护层级顺序，容易出错。其次，如果卡片内容高度不固定，偏移量（比如 top: 8px）根本没法算。我之前在一个项目里用这个，后来加了个“展开详情”功能，卡片高度一变，整个堆叠就乱了，调了大半天才勉强对齐。所以除非是静态展示，否则我不推荐。

核心代码就这几行（transform 方案）

我现在主力用的是 transform + 动态 z-index 的组合。思路是：所有卡片默认重叠在同一个位置，通过 JS 控制 transform: translate() 和 z-index 来实现堆叠效果。关键在于，只动视觉，不动布局，这样不会影响文档流，也方便做手势滑动。

<div id="stack" class="stack-container">
  <div class="card" data-index="0">Card 1</div>
  <div class="card" data-index="1">Card 2</div>
  <div class="card" data-index="2">Card 3</div>
</div>

.stack-container {
  position: relative;
  width: 300px;
  height: 400px;
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, z-index 0.3s;
}

function updateStack(cards) {
  cards.forEach((card, index) => {
    const offset = index * 12; // 每层偏移12px
    card.style.transform = translate(${offset}px, ${offset}px);
    card.style.zIndex = cards.length - index;
  });
}

// 初始化
const cards = Array.from(document.querySelectorAll('.card'));
updateStack(cards);

这个方案的好处太多了。首先，卡片天然重叠，不用操心父容器高度；其次，偏移量完全由 JS 控制，动态增删卡片只要重新跑一遍 updateStack 就行；最重要的是，做滑动交互时，我可以直接监听 touch/mouse 事件，实时修改 transform，性能比改 top/left 高不少（因为不会触发 layout）。

这里注意我踩过好几次坑：别忘了给 .card 加 transition，否则堆叠变化会很生硬。另外，z-index 的 transition 虽然浏览器支持，但实际效果可能不如预期，稳妥起见可以用 setTimeout 延迟设置，不过我亲测在现代浏览器里直接写 transition 也没问题。

那个“新奇”的 sticky 方案，真能用吗？

有同事提议用 position: sticky 来模拟堆叠，想法是让每个卡片 sticky 到不同位置，形成错落效果。代码大概是这样：

.card {
  position: sticky;
  top: 0;
  margin-top: 12px;
}
.card:nth-child(2) { top: 12px; }
.card:nth-child(3) { top: 24px; }

看起来挺聪明，但实测问题很大。sticky 的行为依赖滚动容器，如果你的堆叠组件不在可滚动区域里，或者父容器 overflow 不是 visible，效果就失效。而且 sticky 元素的堆叠顺序和普通定位元素不一样，容易和 z-index 冲突。我试了半小时，最后放弃了——这玩意儿适合做导航栏吸顶，不适合做可控的 UI 堆叠。

我的选型逻辑

总结一下我的选择标准：

• 静态展示、无交互：用纯 CSS 定位，省事，代码少。
• 需要手势滑动、动态增删、或复杂动画：无脑选 transform + JS 控制，灵活度高，性能好。
• 别碰 sticky 方案，除非你明确知道它的限制且场景刚好匹配。

另外，如果项目已经用了像 Framer Motion 或 GSAP 这类动画库，其实可以直接用它们的堆叠 API，比如 Framer 的 layoutId 配合 position: absolute，能自动处理层级和过渡。但如果是轻量级项目，没必要为了一个堆叠引入整个动画库，自己写几行 JS 更清爽。

还有一点实战经验：堆叠组件经常要配合“滑出删除”或“滑入新增”动画。这时候，一定要在动画开始前把即将离开的卡片 z-index 设为最高，否则滑动过程中它可能会被下面的卡片盖住。我第一次做这个效果时就漏了这步，用户滑到一半卡片突然消失，还以为是 bug。

结尾碎碎念

以上是我踩坑后的总结，希望对你有帮助。Stack 堆叠看着简单，但真要做成可交互、可维护的组件，细节不少。我个人偏好 transform 方案，虽然多写点 JS，但换来的是更强的控制力和更少的布局意外。如果你有更好的实现方式，或者在某个方案里踩过我没提到的坑，欢迎评论区交流。这个技巧的拓展用法还有很多，比如结合 3D 旋转做更炫的效果，后续会继续分享这类博客。