Z-index in Internet Explorer not working

Question

I\'ve created a menu for a mobile site, when you click the menu button the menu slides opend, this is the page;

http://www.roadtotheweb.com/m.about.html

The

Answer 1

I regularly swap two layers, changing the z-Index from 0 to 1, and visa-versa. After years, it stopped working in IE. I changed the z-Index to 1 and 2. It now works fine. I think the bug has to do with a 0 z-Index.

Answer 2

It looks like you might be dealing with a known bug:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.”

You can see the bug report on Quirksmode website and a workaround explained in this blog post.

Essentially what you have to do is wrap it in an element with higher Z-index, for example Here is a quick sketch of a workaround:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        ...
    </div>
</div>