是否可以使用css3 translateZ（）而不是z-index？ [英] Can css3 translateZ() be used instead of z-index?

问题描述

例如，具有2个div的绝对位置，可以通过设置第一个div的z-index高于第二个div的第二个div。
我们可以使用translateZ（）或translate3d实现这样的行为吗？

For example having 2 div's positioned absolute, one can put first div upon second by setting first div's z-index higher than second one's. Can we achieve such behaviour using translateZ() or translate3d?

推荐答案

3年后，你可以。
您需要在父级上使用 transform-style：preserve-3d; ，但可能。

The answer now, 3 years after, is that you can. You need to use transform-style: preserve-3d; on the parent, but it's possible.

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

这篇关于是否可以使用css3 translateZ（）而不是z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！