CSS3的translateZ会改变元素的层叠顺序吗？

#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是不是有改变层叠顺序的能力?

samdeo

浏览 2490回答 0