Positioning and z-index in IE

November 29th, 2007 by Eystein

Using absolute positioning to hide and show a nested list is one of the better ways to create a dropdown menu, and it can almost be done using only CSS. IE6 needs a little javascript help to respect the :hover pseudo-class. The Sons of Suckerfish will help you there.

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

In all IE, any element that has position:relative and haslayout=true
forms a stacking context. This is not correct, it would need to have a
z-index to act as a stacking context.

Assume you have two stacking contexts:

B follows A.
B is higher in the stack, nearest to the user.

A
B

No matter what z-index you choose for it, a child A-x will never leave
its stacking context A.

A. A-1, A-2, A-3 ….
B

No child of A will ever be higher in the stack than B.

A real life example

Stacking context before

In my case I had a #header which erroneously formed such a stacking context,
because of

#header {position:relative; width: 920px;} /* haslayout = true */

And there is a regular stacking context following:

#main {position:relative; z-index: 1}

Thus:

#header
#main

No matter what z-index I chose for it, a child (#menu) of #header would never
leave its stacking context #header.

#header #menu
#main

The #menu inside of #header would be painted over by #main. And even if
#main is transparent, the drop down #menu will loose mouse focus and
collapse.

The solution

What it finally came down to was to apply z-index: 2 to #header, to
have the entire #header higher in the stack, nearer to the user, than
#main.

Stacking context

Thank you:

I could have never done this without the help of Ingo Chao and the ever useful css-discuss list.

Tags: css · hover · IE · menu · positioning · z-index14 Comments

14 responses so far ↓

1 Paul Jun 15, 2009 at 11:27 pm

Perfect! Helped heaps! Thanks!
2 Jeroen van Beek Aug 27, 2009 at 9:52 pm

Thanks a lot, I’ve been wrapping my brain around this issue today and finally fixed it after reading your post.
3 Nathanael Boehm Oct 13, 2009 at 12:10 pm

Thank you! I’ve been banging my head against a wall all morning over this issue. I’ve implemented your solution with a jQuery.each loop to decrement an index and apply as the z-index to each of the relevant classes.
4 agua agua Nov 24, 2009 at 7:46 pm

Thank you so much! So helpful.
5 Mihi Jan 29, 2010 at 7:04 pm

You are a star!! This issue made me pull my hair!!
Great solution!! Thanks a ton!
6 Khoa Jun 14, 2010 at 11:51 am

Thanks a lots! I’ve been looking up the way to fix my website.
Today I feel happy, I fixed it after reading your post .
7 nagarajan Sep 4, 2010 at 5:15 pm

thanks,it is very helpful
8 James Evason Dec 23, 2010 at 7:45 pm

Thanks – you helped me.
9 Sarah May 12, 2011 at 3:13 am

This is the most helpful post in the world
10 Tri Le Jul 29, 2011 at 12:43 pm

Wonderfull, I fixed my compatibility problem which makes me sleepless for one night!

Thank you sooo much! Love your article
11 Gaetano Caruana Nov 17, 2011 at 6:00 pm

Really helpful :-)

Thanks a lot.

It totally explained what my problem was! :)
12 Ashish Dec 14, 2011 at 2:57 am

Its nice, now i got the problem, it fixed now , thankx ;)
13 Dara Singh Jan 12, 2012 at 6:01 pm

Thanks Mate, Got Unbelievable help in my Company’s Project

Thanks :)
14 Akash Feb 5, 2012 at 5:48 pm

Thank you from the core sir! That was such a huge issue with no organized solution listed. You’ve layed it down with such simplicity and ease. Love it!

That Norwegian Guy