css3旋转后,z-index不会保留

Question

我有这个代码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.

请建议如何解决这个问题.

谢谢.

Answer 1

请参阅http://jsfiddle.net/uR5MS/1/

您必须将这三个 div 放在同一个堆叠上下文中。确实出乎意料的是，您的代码可以使蓝色 div 高于所有其他 div，因为它嵌套到更高的 div 中。

  body {margin-left:10px;}
  #top {background:blue;width:30px;height:30px;position:absolute;bottom:0;z-index:3;top:70px;}
  button {margin-top:200px}
  #back {width:100px;height:100px;background:red;position:absolute; z-index:1}
  #front {width:100px;height:100px;background:green;position:absolute;top:50px; z-index:2;}

您将必须重新设计 CSS，因为 div 现在是绝对的并且处于相同的堆叠级别。看到z-index现在在变换后被保留。