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?
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.
Bookmark this question.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With