1

I'm running into the IE7 z-index stacking bug, but I can't find a way to work around it. Here's a simple HTML test case:

<!doctype html />
<html>
<head>
</head>
<body>
<div style="position:relative; width:500px;">
    <div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">
        <p style="margin:0;">Menu</p>
        <ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;">
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </div>
    <div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;">
        <p>Header</p>
    </div>
</div>
</body>
</html>

In this example, you'll see that there are two absolutely positioned elements in the top level div. The first one is a menu, and the second one is a header. The menu items are not stacked correctly and show up behind the header.

Screenshot

I've read a lot of posts about the IE7 z-index bug, but I haven't found anything that helps me with this specific problem. Thanks!

Redtopia
  • 4,947
  • 7
  • 45
  • 68
  • ` ` is not a valid doctype. Use ` ` instead, this should prevent IE from using quirksmode. – Zeta Mar 19 '12 at 18:42

3 Answers3

4

This is a common problem with IE7 and z-index. Here's a reference to a previous question I answered which also contains more references for further reading.

Text overlapping items in Dropdown items

Long story short, if the HEADER box and the MENU box are sibings, you need to set the z-index on those. IE7 doesn't work if you only set the z-index on the menu items.

<div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">

The DIV above needs a higher z-index because it's a sibling that contains children that are doing the overlapping.

In a sense, it's required in IE7 for the parent elements to give z-index to it's children. While not technically correct, it's easier to say or understand this way.

Here's a Fiddle: http://jsfiddle.net/JT9tw/

Community
  • 1
  • 1
jmbertucci
  • 8,194
  • 4
  • 50
  • 46
0

Sure the li are behind the header. It is nice that your li have a higher z-index than the header. But the li a children of another stack. and that stack has a z-index of 0. So that means your li have a Z-index off 100 in an element that has a z-index of 0 itself. Header is another stack with z=index 1 and lies over the other div (and its children).

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
0

Parent element position should be set to relative and the absolute positioned elements should have their display set.

Matthew Sprankle
  • 1,626
  • 1
  • 19
  • 26