Stack堆叠布局实战：从原理到项目应用的完整指南

先看效果，再看代码

上周做项目时，UI 给了个卡片堆叠的效果：几张图片错落叠在一起，点击最上面的能滑走，露出下面一张。我第一反应是用绝对定位 + z-index 硬撸，结果发现交互逻辑一复杂就乱套了——特别是要支持拖拽、动画、响应式的时候。折腾了半天，最后用一个叫 Stack 的组件模式搞定了，亲测有效。

核心思路其实很简单：把所有子元素都 position: absolute 叠在同一个容器里，然后通过控制每个子元素的 z-index、transform 来实现视觉上的堆叠和交互。但细节才是魔鬼，下面直接上代码。

<div class="stack-container">
  <div class="stack-item" style="z-index: 3; transform: translate(0, 0);">
    <img src="card1.jpg" alt="Card 1">
  </div>
  <div class="stack-item" style="z-index: 2; transform: translate(-10px, 5px);">
    <img src="card2.jpg" alt="Card 2">
  </div>
  <div class="stack-item" style="z-index: 1; transform: translate(-20px, 10px);">
    <img src="card3.jpg" alt="Card 3">
  </div>
</div>

.stack-container {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 50px auto;
}

.stack-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

这个基础结构跑起来就能看到堆叠效果了。但别急，这只是静态展示。真正用起来，你会发现一堆问题。

踩坑提醒：这三点一定注意

第一个坑：**z-index 不是万能的**。我一开始以为只要给每个 item 设置递减的 z-index 就行，结果在某些浏览器里（尤其是移动端 Safari），如果父容器没设置 transform-style: preserve-3d 或者 will-change，z-index 会失效，导致点击事件穿透到下层元素。后来加上 transform: translateZ(0) 强制开启硬件加速，才稳住。

第二个坑：**事件冒泡搞死人**。当你点击最上层卡片想把它移除时，如果没阻止事件冒泡，可能同时触发下层卡片的点击。我的做法是在 JS 里只处理 z-index 最高的那个元素：

const container = document.querySelector('.stack-container');
container.addEventListener('click', (e) => {
  const items = Array.from(container.querySelectorAll('.stack-item'));
  const topItem = items.reduce((max, item) => {
    const zIndex = parseInt(getComputedStyle(item).zIndex) || 0;
    return zIndex > (parseInt(getComputedStyle(max).zIndex) || 0) ? item : max;
  }, items[0]);

  if (e.target.closest('.stack-item') === topItem) {
    // 执行移除逻辑
    topItem.style.transform = 'translateX(100vw)';
    topItem.style.opacity = '0';
    setTimeout(() => topItem.remove(), 300);
  }
});

第三个坑：**响应式布局下位置错乱**。你用 px 写的偏移量，在小屏上可能堆成一团。建议用 em 或 %，或者干脆在 JS 里动态计算偏移：

function updateStackOffset() {
  const items = document.querySelectorAll('.stack-item');
  items.forEach((item, index) => {
    const offset = index * 8; // 每层偏移 8px
    item.style.transform = translate(${-offset}px, ${offset / 2}px);
  });
}
window.addEventListener('resize', updateStackOffset);
updateStackOffset();

这个场景最好用

Stack 堆叠最香的场景其实是「卡片流」或「消息预览」。比如社交 App 里未读消息的堆叠提示，或者电商首页的促销 banner 轮播。我最近在一个后台系统里用它做了「待办事项堆叠」，用户点掉一个，下面自动浮上来，体验很流畅。

如果你用的是 React/Vue，可以封装成组件。以 React 为例，核心逻辑就是维护一个数组，渲染时 reverse 一下保证最新项在最上层：

function Stack({ items }) {
  return (
    <div className="stack-container">
      {[...items].reverse().map((item, index) => (
        <div
          key={item.id}
          className="stack-item"
          style={{
            zIndex: items.length - index,
            transform: translate(${-index * 6}px, ${index * 3}px),
          }}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}

注意这里用了 [...items].reverse() 而不是直接 reverse 原数组，避免副作用。这种写法简单粗暴，但性能没问题，因为 items 通常不会超过 10 个。

高级技巧：加点动画更丝滑

纯位移动画有点干巴，加点旋转和缩放会更生动。比如滑出时加个轻微旋转：

.stack-item.swipe-out {
  transform: translateX(100vw) rotate(10deg) !important;
  opacity: 0;
}

但要注意：**不要过度使用 3D transform**。我在一个低端安卓机上测试时，连续叠加 rotateX 和 perspective 导致页面卡成幻灯片。后来妥协了，只用 2D transform，反而更稳。

另外，如果要做「拖拽滑出」，建议用 pointer-events: none 配合 CSS 变量动态控制位置，而不是频繁操作 DOM。像这样：

let isDragging = false;
let startX, currentX;

container.addEventListener('pointerdown', (e) => {
  if (e.target.closest('.stack-item') !== getTopItem()) return;
  isDragging = true;
  startX = e.clientX;
  container.style.setProperty('--drag-x', '0');
});

container.addEventListener('pointermove', (e) => {
  if (!isDragging) return;
  currentX = e.clientX - startX;
  container.style.setProperty('--drag-x', ${currentX}px);
});

container.addEventListener('pointerup', () => {
  if (!isDragging) return;
  isDragging = false;
  if (Math.abs(currentX) > 100) {
    // 滑出
    container.classList.add('swipe-out');
  } else {
    // 回弹
    container.style.setProperty('--drag-x', '0');
  }
});

.stack-item {
  transform: translate(var(--drag-x, 0), 0);
}

最后说两句

Stack 堆叠看起来简单，但要做好细节很磨人。我现在的方案也不是完美的——比如在快速连续点击时偶尔会漏掉事件，但影响不大，就没深究。毕竟业务赶进度，能跑就行（狗头）。

以上是我踩坑后的总结，希望对你有帮助。这个技巧的拓展用法还有很多，比如结合 Intersection Observer 做懒加载堆叠，或者用 WebGL 做 3D 翻转效果，后续会继续分享这类博客。有更优的实现方式欢迎评论区交流。