IE7 Absolute Element Appearing Behind Relative One

CSS dropdown list showing behind the dropdown below, IE6, IE7, absolute positioning bug

There is a known issue with z-index in IE. It treats z-index differently for absolute positioned elements than it does for relative positioned elements. It's like you have two sets of z-indexes. You might be able to fix it by using wrappers with the same positioning, if you cannot get all your elements to use the same positioning.

EDIT 1:

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

EDIT 2:

z index bug

Z-Index IE bug fix?

Internet Explorer z-index bug?

EDIT 3:

jQuery Solutions:

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

position: relative appearing over position:absolute

I suspect you've already tried it, but set a z-index on your relatively positioned element that's lower than your absolutely positioned element's z-index as the first test.

If that doesn't work, you need to make sure both elements are in the same stacking context. In IE, whenever you apply the position CSS rule to an element, it generates a new stacking context within that element. That means that z-index will only be properly respected within that element's children and children in other stacking contexts with lower z-indexes may still stack above.

In your case, you either need to put the dropdown and button in the same stacking context or apply z-index to the 2 elements that are generating their separate stacking contexts.

Position Absolute div inside position relative list item - Clipping issue - ie7

Add a wrapper element

Updated Demo

If editing the HTML source code is an option, add a wrapper element around the side content, and place it before the main text content. Then add position:relative to the wrapper element rather than adding it to .listitem. This moves the local stacking context (created at an inconvenient time in IE7) to an element where it does no harm.

HTML

<div class="container">
    <div class="listitem">
        <div class="wrapper">
            <div class="layer">I'm a layer</div>
        </div>
        Some long content here bla bla blaaaaaaa bIE7 Absolute Element Appearing Behind Relative Oneaaa
    </div>
    ....
</div>

CSS

.listitem {
    /* position: relative; */   /* Removed here */
    ....
}
.wrapper {
    position: relative;    /* Added here */
    height: 0;
}

jQuery

If editing the HTML source code isn't an option, there are a few options available using jQuery.

1. Take the basic approach presented by @avrahamcool (setting the z-index of each .listitem to a decreasingly small value). The downside to this approach is that it reverses the layering order of the side elements relative to one another, which may or may not be acceptable.

2. Use jQuery to edit the HTML DOM so that the HTML is as shown above, using the related CSS changes as well. The downside to this approach is that the styling of the content won't render correctly until after the jQuery code has run. So the content may briefly appear broken when the page first loads.

3. Set .container to position:relative, rather than .listitem. Use jQuery to calculate the relative position of each of .listitem element within .container, and set the top position of each side element based on this. This approach has the same downside as solution #2.

4. In an extreme case, if even editing the JavaScript isn't an option, you could simulate solution #1 by adding a series of increasingly long CSS selectors with decreasing z-index values (as shown below). I don't recommend this approach, as it's wildly impractical, but it could be used as a last resort.

CSS

.listitem {z-index:99;}
.listitem + .listitem {z-index:98;}
.listitem + .listitem + .listitem {z-index:97;}
...

Conclusion

In short, the current HTML doesn't support this type of layout in IE7. The only elegant solution is to change the HTML source code to something that does support it. Any jQuery solution will tend to be awkward in one way or another.

IE 6 & IE 7 Z-Index Problem

Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:

1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body

if this is not feasible then

2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have a position:relative. Try applying that property to #bottom and #body (or #signpost)

let me know how that works out

Darko

IE7 Z-Index Layering Issues

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.

In short, try adding this CSS:

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

or redesign the document such that your spans don't have position:relative any longer:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).

Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.

Absolutely position div sits behind textbox in IE7

Okay finally figured it out, I changed where it appends so it's appended in a div at the bottom of the page after all the textboxes (in my case, a buttons div), so instead of dd.parentNode.appendChild(ddNode), it's now document.getElementbyId("buttons").appendChild(ddNode), but also had to change the CSS so it's absolute positioned in relative to the page wrapper rather than the specific div, and it seems to have fixed it.

Absolute overlay div element doesn't cover relatively positioned elements

The same question was asked here.

Don't ask me why, but the last answer there seems to fix the problem (though you'll need jQuery or the like):

http://jsfiddle.net/Xmznn/1/

---

Related Topics