可以使用 css3 translateZ() 代替 z-index 吗？答案

【问题标题】：Can css3 translateZ() be used instead of z-index?可以使用 css3 translateZ() 代替 z-index 吗？
【发布时间】：2013-08-01 09:10:30
【问题描述】：

例如，有 2 个 div 的绝对定位，可以通过将第一个 div 的 z-index 设置为高于第二个的 z-index 将第一个 div 放在第二个上。我们可以使用 translateZ() 或 translate3d 实现这种行为吗？

【问题讨论】：

你为什么不试试看呢？

标签： css css-transforms translate3d

【解决方案1】：

3 年后现在的答案是，你可以。您需要在父级but it's possible 上使用transform-style: preserve-3d;。

.container {
  transform-style: preserve-3d;
}
.test1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate3d(0, 0, 1px);
}
.test2 {
  width: 500px;
  height: 500px;
  background: green;
  left: 250px;
  top: 250px;
  position: absolute;
  transform: translate3d(0, 0, 0);
}

<div class="container">
  <div class="test1">
    test
  </div>

  <div class="test2">
    test #2
  </div>
</div>

【讨论】：

谢谢，将此答案标记为已接受。值得注意的是，两个卷积元素都应应用 transform 属性。
嘿。可以看看this吗？尽管具有更大的平移 z 值，但该按钮仍被隐藏。谢谢。
嗯。我在 Chrome 58 和 Safari 10.1 中看到了一个大红色方块。
哦，等等。这就是我想要得到的吗？
是的，它就是这么定义的... :)

【解决方案2】：

简短回答：否。 View demo 在发布时有效

更长的答案：不应该，但有时，例如当一个元素具有变换而其兄弟元素没有变换时，某些浏览器don't handle the situation well，导致z-index被忽略.

然而，通常这是因为transform 本身被应用，而不是因为translateZ。在这种情况下的解决方案是提供所有相关元素transform: translate3d(0px, 0px, 0px) 或类似的东西，使浏览器更仔细地呈现元素

【讨论】：