css - 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>

旋转后，z-index 不会保留在#top 元素上。

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

谢谢。

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 现在在转换后得到保留。