CSS 3D 变换中z-index失效问题

CSS 3D 变换中 z-index 失效问题

1. z-index 失效了

在 CSS 中，z-index 通常用于控制元素的层叠顺序，数值越大，元素越靠前显示。在 3D 变换（如 rotateX、translateZ） 中使用 z-index 时，可能会发现z-index 失效 了——即使设置了更高的 z-index，元素仍然无法正确叠放。

示例代码：

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

.parent>div {
            width: 100px;
            height: 100px;
        }

        .parent {
            width: 200px;
            background-color: blue;
            margin: 100px auto;
            transform-style: preserve-3d;
            /* 启用 3D 空间 */
        }

        .child1 {
            background-color: pink;
            transform: translate3d(0px, 50px, 10px);
            z-index: 2;
            /* 理论上应该显示在前面 */
        }

        .child2 {
            background-color: purple;
            transform: translateZ(20px);
            z-index: 1;
            /* 理论上应该显示在后面 */
        }

预期效果：child1 应该在 child2 前面，但实际相反。

2. z-index 失效的原因

(1) 层叠上下文（Stacking Context）被破坏

z-index的层叠上下文
z-index 的正常工作依赖于 层叠上下文，但 3D 变换会创建新的层叠上下文，导致 z-index 的比较方式发生变化。

• 默认情况下，z-index 比较的是 同一层叠上下文内的元素。
• 3D 变换后，z-index 的比较可能 不再遵循 HTML文档中元素的逻辑排列顺序，而是由 3D 渲染顺序 决定。

(2) 3D 渲染顺序遵循z轴排列顺序

在 3D 空间中，浏览器默认使用z轴排列决定渲染顺序：

• 离屏幕越近的元素越后渲染，因此会覆盖前面的元素。
• z-index在 3D 变换中被忽略，因为浏览器优先使用 Z 轴位置 来决定显示顺序。

3. 解决方案：如何正确控制 3D 层叠顺序？

方法 1：调整 translateZ 而非依赖 z-index

3D 变换下 使用z-index不好预测渲染顺序 ，最直接的方法是 控制 translateZ的值：

.child1 {
  transform: translateZ(30px); /* 更大的 Z 值，确保显示在前面 */
}
.child2 {
  transform: translateZ(10px); /* 更小的 Z 值，确保显示在后面 */
}

✅ 方法 2：使用 transform-style: preserve-3d+ 父容器控制顺序

确保父元素启用 preserve-3d，并 避免在子元素中使用 z-index，而是通过 调整 translateZ 或 结构顺序 控制层叠：

.parent {
  transform-style: preserve-3d; /* 关键！ */
}
.child1 {
  transform: translateZ(10px);
}
.child2 {
  transform: translateZ(20px);
}

• 在 3D 场景中，优先使用 translateZ 控制层叠顺序，而非依赖 z-index。
• 如果必须使用 z-index，确保父元素层叠上下文正确,在 CSS 3D 渲染中，浏览器优先依赖 translateZ决定元素的显示顺序。

符合3D 下的真实情况

• translateZ 表示真实的深度
  在 3D 空间中，translateZ 直接定义物体在 Z 轴上的位置，符合近大远小、遮挡关系。浏览器根据 物体在 3D 空间中的实际位置 计算遮挡关系，不依靠2d定位下的 z-index。

    /* 离观察者更近 */
  .box1 { transform: translateZ(100px); }
  /* 离观察者更远 */
  .box2 { transform: translateZ(-50px); } 
  

  • 此时无论 z-index 如何设置，box1都应遮挡 box2，否则会破坏 3D 视觉效果。

• z-index 是 2D 平面的抽象概念
  z-index原本用于控制 同一平面内 元素的层叠顺序，无法表达 3D 空间中的深度关系。
  元素未启用 3D 变换z-index可能会造成影响
  若父元素没有 transform-style: preserve-3d，子元素会退化为 2D 平面渲染，此时 z-index 生效。

   /* 未开启3d效果子元素按 2D 规则渲染 */
   .parent { transform-style: flat; }
       /* 此时 z-index 有效 */
  .child { z-index: 1; }