Ie7 Z-Index Layering Issues

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:

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

<label>Input #2:</label> <input>

See 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.

IE7 Z-Index issue - Context Menu

I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.

    <div class="control-action" style="float:right"> 
<div class="control-action-menu">
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>

With this markup change the css has changed into the following:



.control-action ul
z-index: 10000;

IE7 CSS z-index issue not apparent on any other browser

This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.

I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.

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


IE7 Z-Index Issue (CSS DropDown)

You may want to add position:relative; to the part that's dropping down. According to this it'll usually solve your problem.

Yet another IE7 Z-Index Issue (in table cells)

try removing .c { position: relative } and adding .c:hover { position: relative }. Not tested but think this should work

here is another: add .c { z-index: 10000 } and .c:hover { z-index: 10001 }

IE7 z-index issues with jQuery and parent divs (possible stacking context problems)

When you're working with Z-index you have to remember that z-index is only applicable to certain positions: relative, absolute, and fixed.

Also, that, besides setting the z-index on the actual element that you want positioned, you also have to add z-index to its parent element.

Give it a try and let us now how it works. If it doesn't creating a jsfiddle would help a lot :

Related Topics

Leave a reply