Can css3 translateZ() be used instead of z-index?

Question

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?

Why don't you try it and find out? – cimmanon Jul 31 '13 at 18:05 — cimmanon, Jul 31 '13 at 18:05

score 24 · Accepted Answer · answered Apr 07 '16 at 11:28

24

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>

answered Apr 07 '16 at 11:28

curly_brackets

5,491
15
58
102

1

Thanks, marked this answer as accepted. It is worth noting that both envolved elements should have `transform` property applied. – mumu2 Apr 08 '16 at 11:06
Hey. Can you take a look at [this](https://plnkr.co/KT6raJ3rBgq8aO1y8Xlk)? The button is hidden despite having greater translate z value. Thanks. – user1203349 Jun 02 '16 at 07:14
Hm. I’m getting a big red square in Chrome 58 and Safari 10.1. – Paul D. Waite May 04 '17 at 23:09
Oh, wait. Is that what I’m meant to get? – Paul D. Waite May 04 '17 at 23:12
Yeah, that's how it was defined... :) – curly_brackets May 22 '17 at 13:47
FYI: this doesn't seem to work if `.container` has `overflow: hidden;` applied – Philippe Oct 18 '22 at 12:14

score 5 · Answer 2 · edited May 23 '17 at 12:26

Short answer: No. View demo which works as of time of posting

Longer answer: It's not supposed to, but sometimes, such as when one element has a transform when its sibling doesn't, some browsers don't handle the situation well, resulting in the z-index being ignored.

Generally, however, this is because the transform itself is applied, not because of the translateZ. The solution in such a case it to give all relevant elements transform: translate3d(0px, 0px, 0px) or something similar which makes the browser render the elements more carefully

Can css3 translateZ() be used instead of z-index?

2 Answers2

Linked