CSS Grid中使用overflow:visible时如何反转元素堆叠顺序？

你可以通过以下两种更高效的方式实现网格元素堆叠顺序反转，不用逐个手动写z-index：

方法1：CSS变量+:nth-child()自动计算层级 #

利用CSS变量结合:nth-child()选择器，自动为每个卡片分配递减的z-index值，实现先出现的元素层级更高：

修改后的CSS代码：

.card-container {
  width: 80px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  grid-gap: 10px;
  background: #aaaaee;
  --card-count: 3; /* 这里设置卡片总数量，动态场景可通过JS自动赋值 */
}

.card {
  padding: 5px;
  height: 2em;
  overflow: hidden;
}

/* 自动计算z-index：第一个卡片层级为--card-count，依次递减 */
.card:nth-child(n) {
  z-index: calc(var(--card-count) - (n - 1));
}

.card:hover {
  overflow: visible;
}

.bgcolor {
  background-color:white;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2);
}

对应的HTML可以去掉手动的style属性，恢复干净结构：

<div class="card-container">
  <div class="card">
    <div class="bgcolor">
      Text A1 Text A2 Text A3 Text A4 Text A5 Text A6 Text A7 Text A8
    </div>
  </div>
  <div class="card">
    <div class="bgcolor">
      Text B1 Text B2 Text B3 Text B4 Text B5 Text B6 Text B7 Text B8
    </div>
  </div>
  <div class="card">
    <div class="bgcolor">
      Text C1 Text C2 Text C3 Text C4 Text C5 Text C6 Text C7 Text C8
    </div>
  </div>
</div>

如果卡片数量是动态生成的，只需用JS获取卡片总数，给容器设置--card-count变量即可：

const container = document.querySelector('.card-container');
const cardCount = container.children.length;
container.style.setProperty('--card-count', cardCount);

方法2：利用3D变换调整堆叠顺序 #

通过给容器设置perspective开启3D空间，结合translateZ变换控制元素堆叠——3D空间中z轴值越大的元素越靠前：

修改后的CSS：

.card-container {
  width: 80px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  grid-gap: 10px;
  background: #aaaaee;
  perspective: 1px; /* 开启3D空间 */
}

.card {
  padding: 5px;
  height: 2em;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* 给每个卡片设置递减的translateZ值，先出现的z轴值更大 */
.card:nth-child(1) { transform: translateZ(3px); }
.card:nth-child(2) { transform: translateZ(2px); }
.card:nth-child(3) { transform: translateZ(1px); }

.card:hover {
  overflow: visible;
}

.bgcolor {
  background-color:white;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2);
}

这种方法不依赖z-index，完全通过3D变换特性实现堆叠顺序反转，适合不想使用z-index的场景。

原理说明 #

浏览器默认堆叠规则是：同一堆叠上下文内，DOM中后出现的元素会覆盖先出现的元素。上述两种方法通过自动分配层级或3D空间位置，让先出现的元素拥有更高的堆叠优先级，避免了手动逐个设置z-index的繁琐。

内容的提问来源于stack exchange，提问作者chiborg