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.

This appears to be a duplicate issue of http://stackoverflow.com/questions/6953497/webkit-transform-overwrites-z-index-ordering-in-chrome-13 — , Jul 14 '14 at 14:40
I read that post. As I am a newbie to css3, I am unable to fix the code. Can you please suggest a solution for my problem. Thanks. — Arnold, Jul 14 '14 at 15:08

score 1 · Accepted Answer · answered Jul 14 '14 at 15:07

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.

I drag, resize and rotate #back. So, #top too should move along with #back. So, I have to change the position of #top everytime #back is dragged, resized or rotated. So, if there is no other solution, I will try to implement your solution. Anyway, thanks for the reply. — Arnold, Jul 14 '14 at 16:17

score 0 · Answer 2 · answered Jul 14 '14 at 14:53

0

It happens because the transform function creates a stacking context:

Due to the Stacking context, after the transformation the child div is trapped within the parent zIndex forever.

answered Jul 14 '14 at 14:53

Luizgrs

4,765
1
22
28

can you please suggest how to solve this problem in my code ? thanks. – Arnold Jul 14 '14 at 15:05

z-index not retained after css3 rotate

2 Answers2