CSS中如何实现数据卡片堆叠—z-index层叠控制

<div class="card-stack-container">
  <div class="data-card card-alpha">
    <h3>卡片 A</h3>
    <p>这是第一张卡片的内容，它位于堆叠的顶部。</p>
  </div>
  <div class="data-card card-beta">
    <h3>卡片 B</h3>
    <p>这是第二张卡片的内容，它位于中间层。</p>
  </div>
  <div class="data-card card-gamma">
    <h3>卡片 C</h3>
    <p>这是第三张卡片的内容，它位于堆叠的底部。</p>
  </div>
</div>

.card-stack-container {
  position: relative; /* 关键：为内部的绝对定位元素提供参考系 */
  width: 320px; /* 设定一个宽度，让堆叠效果更明显 */
  height: 250px; /* 设定一个高度，防止内容溢出 */
  margin: 50px auto; /* 居中显示 */
  border: 1px dashed #ccc; /* 方便观察容器边界 */
}

.data-card {
  position: absolute; /* 核心：使z-index生效并允许自由定位 */
  width: 300px;
  height: 200px;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* 控制每张卡片的位置和堆叠顺序 */
.card-alpha {
  top: 0;
  left: 0;
  z-index: 3; /* z-index 值越大，越靠前 */
  background-color: #e0f7fa; /* 浅蓝色 */
}

.card-beta {
  top: 20px;
  left: 20px;
  z-index: 2;
  background-color: #e8f5e9; /* 浅绿色 */
}

.card-gamma {
  top: 40px;
  left: 40px;
  z-index: 1; /* z-index 值越小，越靠后 */
  background-color: #ffebee; /* 浅红色 */
}

.data-card {
  /* ... 之前的样式 ... */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, z-index 0s 0.2s; /* z-index的过渡有点特殊 */
  cursor: pointer; /* 提示用户可交互 */
}

.data-card:hover {
  transform: translateY(-15px) scale(1.05); /* 向上移动并放大 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 增加阴影深度 */
  z-index: 100; /* 悬停时提到最上层 */
}

document.addEventListener('DOMContentLoaded', () => {
  const cards = document.querySelectorAll('.data-card');
  let highestZIndex = 10; // 初始化一个较高的z-index基准

  cards.forEach(card => {
    // 鼠标移出时，可以考虑将z-index恢复到初始值，或者保持不变
    card.addEventListener('mouseleave', () => {
      // 如果需要恢复，可以在这里设置一个默认z-index，或者移除内联z-index
      // card.style.zIndex = ''; // 移除内联样式，让CSS规则生效
    });

    card.addEventListener('click', () => {
      // 遍历所有卡片，将它们的z-index降低，避免它们遮挡新置顶的卡片
      cards.forEach(c => {
        if (c !== card) {
          // 这里的逻辑可以更复杂，比如按初始顺序重新分配z-index
          // 但简单起见，我们只确保被点击的卡片最高
          c.style.zIndex = '1'; // 或者一个较低的基准值
        }
      });

      // 提升被点击卡片的z-index
      highestZIndex++; // 每次点击都确保新置顶的卡片z-index最高
      card.style.zIndex = highestZIndex;

      // 还可以添加class来触发CSS动画，例如：
      card.classList.add('clicked-to-front');
      // 动画结束后移除class
      card.addEventListener('animationend', () => {
        card.classList.remove('clicked-to-front');
      }, { once: true }); // 确保事件只触发一次
    });
  });
});

/* 默认堆叠样式 (适用于大屏幕) */
.card-stack-container {
  position: relative;
  /* ... 其他样式 ... */
}

.data-card {
  position: absolute;
  /* ... 其他样式 ... */
}

/* 媒体查询：当屏幕宽度小于768px时 */
@media (max-width: 768px) {
  .card-stack-container {
    position: static; /* 取消相对定位，容器回到文档流 */
    width: auto; /* 宽度自适应 */
    height: auto; /* 高度自适应 */
    display: flex; /* 使用Flexbox让卡片垂直排列 */
    flex-direction: column;
    gap: 15px; /* 卡片之间的间距 */
    margin: 20px; /* 适当外边距 */
    border: none; /* 移除调试边框 */
  }

  .data-card {
    position: static; /* 取消绝对定位，卡片回到文档流 */
    width: 100%; /* 宽度占满父容器 */
    height: auto; /* 高度自适应内容 */
    top: auto; /* 取消定位偏移 */
    left: auto; /* 取消定位偏移 */
    z-index: auto; /* 取消z-index影响 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 调整阴影，可能更轻微 */
  }
}