1 Posted by Gérard Talbot on 17 January 2006 | Permalink

Most of the z-index related bugs happening on MSIE 6 have already been discovered and described at

Wrong z-index implementation bugs
http://www.aplus.co.yu/css/z-pos/index2.php
by Aleksandar Vacić

2 Posted by Tino Zijdel on 18 January 2006 | Permalink

Indeed, somebody already pointed that link out to me (I didn't know of it's existance before, but I was aware of the bug itself but only recently found time myself to describe it). Fact is though that Aleksandar's description is rather lengthy and I wanted to provide a simple and straight-forward description of this bug with regards to IE.

Furthermore I find this bug rarely described and I feel that it deserves more exposure in the hope that Microsoft will fix it in the next release of IE.

3 Posted by russell on 16 October 2006 | Permalink

The linked article really helps in understanding the issue with IE but in the end didn't contain anything to solve my particular problem. In my case I changed the zIndex value of the elements via javascript and got what I needed.

4 Posted by Rob Haswell on 27 June 2007 | Permalink

I have recently resolved this bug by using negative z-index values on my positioned elements.

5 Posted by angelsoft on 10 July 2007 | Permalink

z-index: -1 makes some elements (in one of my website's case, it's the header image) invisible.

6 Posted by Hlusta on 13 July 2007 | Permalink

I do the same as Rob does, it usually works. But in my very recent project even these negative values of z-index failed (MSIE7 quirks, MSIE6 is OK) to work. I have to try something else now :(. If I will succeed, will post it here.

7 Posted by Hlusta on 13 July 2007 | Permalink

Hi again. So: one of the elemenets was not 'position: relative;', so the 'z-index' didn't work properly. That's all (pretty simple). Only MSIE7 needed this... :(. So if you experience this problem with 'z-index', try it :).

8 Posted by baker on 19 September 2007 | Permalink

What I had to do:

The containing element needed a z-index of at least 1 greater than the z-index of the elements below it.

This was used in conjunction with the IE hover fix (for drop down menus) and JQUERY to have an error bubble appear when you did a form submit w/o selecting or entering anything (which was position:absolute, and still is).

9 Posted by Cory on 11 January 2008 | Permalink

I just fixed this, on my page anyway, by adding a zindex to all parent elements of the element that wasn't showing up properly.

I have a dropdown menu that is like:

ul > li > a
ul > li > ul > li > a

So each menu item can contain a list that shows up on :hover.

What I did was give each element a zindex, starting with 1, and incrementing by 1 as I got deeper in the tree. I also removed any unnecessary zindex properties from other elements that I was messing with to try to get it to work.

I now have a working css dropdown menu. In IE7 at least...

You can take a look at my code at pdfcarver.com (whenever I put it up...)

10 Posted by Ted Behling on 21 January 2008 | Permalink

I followed baker's suggestion of adding a higher z-index to the parent element, which solved the problem in IE 6 and 7, and also works in Firefox. You can test this by modifying the div on line 24 (id=container) of the "Test Page", above, to add a style="z-index: 30".

11 Posted by Daniel Due on 13 May 2008 | Permalink

I did as Baker, and added a higher z-index to the parent element! Fixed my problem in IE 7 instantly!