Positioning and z-index in IE

Eystein — Thu, 29 Nov 2007 13:33:51 +0000

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

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.

Thank you:

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

That Norwegian Guy » menu

Positioning and z-index in IE

A real life example

The solution

Thank you: