我有这段代码http://jsfiddle.net/C32Hx/4/。
<style>
body {margin-left:10px;}
#top {background:blue;width:30px;height:30px;
position:absolute; bottom:0; z-index:2;}
button {margin-top:200px}
#back {width:120px;height:100px;background:red; position:absolute}
#front {width:100px;height:100px;background:green;
position:absolute; margin-top:50px; z-index:0.8}
</style>
<div id="back"><div id="top"></div> back</div>
<div id="front">front</div>
<button onclick="rotate()">rotate</button>
<script>
function rotate()
{
document.getElementById("back").style.MozTransform = "rotate(10deg)";
document.getElementById("back").style.WebkitTransform = "rotate(10deg)";
document.getElementById("back").style.msTransform = "rotate(10deg)";
document.getElementById("back").style.transform="rotate(10deg)";
return false;
}
</script>
旋转后,#top元素的z-index未保留。
请建议如何修复此问题。
谢谢。