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

Question

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

Answer 1

现在,3年后的答案是,你可以.你需要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>

Answer 2

简短的回答：不。查看截至发帖时有效的演示

更长的答案：不应该这样做，但有时，例如当一个元素进行变换而其兄弟元素没有变换时，某些浏览器不能很好地处理这种情况，导致 z-index 被忽略。

然而，一般来说，这是因为transform应用了 本身，而不是因为translateZ. 在这种情况下的解决方案是提供所有相关元素transform: translate3d(0px, 0px, 0px)或类似的东西，这使得浏览器更仔细地渲染元素