I'm working on a parallax effect and would like to align my layer in 3D space using translateZ. But adding an overflow property to the wrapper seems to break the Z-positioning of its children. You can try it out in this Codepen by simply deleting line 6 in the CSS. As soon as the overflow is gone, the #back div correctly displays in front of the #front div, due to its bigger Z value.
Any idea why this happens and how I can fix this behaviour?
.wrapper {
height: 90vh;
perspective: 100px;
perspective-origin: top left;
transform-style: preserve-3d;
overflow: hidden; /*<-- delete this line */
}
#back {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transform: translate3d(0, 0, 20px);
}
#front {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
transform: translate3d(30px, 30px, 10px);
}<div class="wrapper">
<div id="back">back</div>
<div id="front">front</div>
</div>