Geek Answers Handbook

Z-index is not saved after css3 rotation

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 rotation, the z-index is not stored on the #top element.

Please suggest how to fix this.

Thanks.

+7
css css3
source share
2 answers

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

You must make three divs in the same stacking context. Unsurprisingly, your code could make the blue div taller than everyone else, as it is nested in 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 need to reverse engineer CSS, since divs are now absolute and are on the same stacking level. See that z-index now saved after conversions.

+1
source share

This is because the conversion function creates a stacking context:

Due to the Stacking context, the child div is held forever in the parent zIndex after the conversion.

0
source share

More articles:


All Articles