Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 707
mumu2 Avatar asked Jul 31 '13 17:07

mumu2


People also ask

What is translateZ CSS?

translateZ() The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.

Does transform affect Z index?

Bookmark this question.

How do I fix Z index in CSS?

In Summary To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.


1 Answers

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>
like image 116
curly_brackets Avatar answered Sep 16 '22 12:09

curly_brackets