z-index not retained after css3 rotate

Question

I have this code 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>

After rotate, z-index is not retained on #top element.

Please suggest how to fix this.

Thanks.

Answer 1

See http://jsfiddle.net/uR5MS/1/

You have to make the three divs in the same stacking context. It's really unexpected that your code could ever make the blue div above all others, since it's nested to a higher 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;}

You will have to redesign the CSS since the divs are now absolute and in the same stacking level. See that the z-index now is preserved after transforms.