问题
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?
回答1:
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>
回答2:
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
来源:https://stackoverflow.com/questions/17977220/can-css3-translatez-be-used-instead-of-z-index