CSS 3D立方体绘制顺序问题：如何让c2显示在c1后方？

我之前也踩过类似的CSS层级坑，大概率是层叠上下文在搞怪！咱们一步步捋清楚解决办法：

1. 先定位问题根源 #

你设置z-index没生效，很大可能是c1触发了独立的层叠上下文——比如用了transform、opacity < 1、filter这类属性，或者给c1加了position: relative/absolute同时指定了非auto的z-index。这种情况下，c1的整个层叠上下文会变成一个独立的“层级容器”，哪怕给c2设置更低的z-index，也没法跑到c1的“身后”。

2. 具体解决方案 #

方案一：移除c1的层叠上下文触发属性

先检查c1的CSS代码，把那些会创建层叠上下文的属性（比如transform: translate(...)、opacity: 0.9）删掉，或者把它们转移到c1的父元素上。然后给两个元素设置定位和层级：

.c1 {
  position: relative;
  z-index: 1; /* 让c1处于上层 */
  height: 100px; /* 替换成你实际的c1高度 */
  /* 其他样式保留 */
}

.c2 {
  position: relative;
  z-index: 0; /* 让c2处于下层 */
  margin-top: 0; /* 确保顶部和c1底部无缝衔接 */
  /* 其他样式保留 */
}

调整后c2就会乖乖待在c1后方，且位置对齐。

方案二：如果必须保留c1的特殊属性

要是c1的transform这类属性不能删，咱们可以给两个元素的父容器分别设置层级：

/* 假设c1的父容器是.c1-wrap，c2的父容器是.c2-wrap */
.c1-wrap {
  position: relative;
  z-index: 1; /* 让c1所在的上下文层级更高 */
}

.c1 {
  transform: translateY(20px); /* 保留你的位移属性 */
  height: 100px;
}

.c2-wrap {
  position: relative;
  z-index: 0; /* 让c2所在的上下文层级更低 */
}

.c2 {
  margin-top: -20px; /* 抵消c1的位移，让顶部和c1底部对齐 */
  /* 其他样式保留 */
}

3. 精准调整位置 #

如果c2和c1还有间距，检查是否有默认的margin/padding，或者用绝对定位精准控制：

.c2 {
  position: absolute;
  top: 100px; /* 数值等于c1的实际高度 */
  left: 0;
  width: 100%;
}

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