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

Question

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

Answer 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>