Geek Answers Handbook

Z-index in Internet Explorer does not work

I created a menu for a mobile site, when you press the menu button, the menu slides open, this is the page;

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

The only problem is that the menu on the IE and Windows phone is not the topmost item, so it slides behind the objects.

I tried changing z-index, position type, hasLayout to no avail.

I would be grateful for any help.

J

+7
source share
3 answers

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

"A new stacking context is created in the positioned Internet Explorer elements, starting with the z-index value of 0. Therefore, the z-index does not work correctly.

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

Essentially, you need to wrap it in an element with a higher Z-index, for example The following is a brief overview of the workaround:

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

I regularly replace two layers by changing the z-index from 0 to 1 and vice versa. After several years, he stopped working in IE. I changed the z-Index to 1 and 2. Now it works fine. I think the error is related to 0 z-Index.

0
source

If it still doesn’t work, make sure the site’s compatibility mode is disabled.

-5
source

More articles:


All Articles