css3中的translateZ能够改变元素的层叠顺序吗？
以下是css：
#a {
perspective:800px;
width:500px;
height: 500px;
margin: auto;
margin-top: 100px;
}
#b {
transform-style:preserve-3d;
}
#b > div {
position: absolute;
}
#b > div:nth-of-type(1) {
width:100px;
height: 100px;
background: #0f0;
transform:translateZ(30px);
}
#b > div:nth-of-type(2) {
width: 100px;
height: 100px;
background: #f00;
transform:translateZ(-10px);
}<body>
<div id="a">
<div id="b">
<div></div>
<div></div>
</div>
</div>
</body>效果如下
根据常规的层叠顺序计算：红色框应该是在绿色框的上面。加了translateZ之后就变成绿色框在上面，所以translateZ是不是有改变层叠顺序的能力?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
推荐一篇文章：http://www.zhangxinxu.com/wor...