Z-index in Internet Explorer not working

z-index
Naz picture Naz · Sep 20, 2012 · Viewed 36.9k times · Source

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 only problem is that in IE and Windows phone the menu is not the top-most element so slides behind objects.

I have tried to change the z-index, position type, hasLayout to no avail.

I would appreciate any assistance.

J

Answer

nana picture nana · Sep 20, 2012

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>

Related questions

z-index not working with fixed positioning

I have a div with default positioning (i.e. position:static) and a div with a fixed position. If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element. Or …

Read More
Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More