Order in Internet Explorer

Question

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

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

Here we go, another "something is not working on IE"... Why I am not surprised? Anyway, try setting an absolute position for it. — Gilberto Torrezan, Sep 20 '12 at 16:52
Possible duplicate of [Dropdown menu hides behind other elements in IE](http://stackoverflow.com/questions/3972807/dropdown-menu-hides-behind-other-elements-in-ie) — Abdul Rehman Yawar Khan, Jan 18 '16 at 15:01

score 42 · Accepted Answer · edited Apr 24 '20 at 18:35

42

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>

edited Apr 24 '20 at 18:35

Jordan Nelson

453
6
17

answered Sep 20 '12 at 16:54

nana

4,426
1
34
48

1

Had the same problem and following the instructions on the link you posted solved it. – Francisco Ochoa Nov 05 '13 at 16:09
same, had this come up on an HTA file I have forced into IE7 and was getting frustrated with it so much. – ATek Oct 20 '15 at 01:12
1

You are the best !! – Hugo Seleiro Feb 05 '18 at 17:38

score 1 · Answer 2 · answered Aug 11 '14 at 01:40

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.

answered Aug 11 '14 at 01:40

Webby

19
1

Order in Internet Explorer

2 Answers2

Linked