Hello, I’ve been tearing my hair out with this one.
I have a dropdown menu where the dropdown element is appearing behind the divs beneath it - in IE7. In all other browsers it’s OK. I have tried setting different z-index’s to all the other elements but it doesn’t work.
I think the problem is to do with the position: relative settings to the divs I have underneath the dropdown menu.
You could add z-index:9999; for the <div id=“header”>.
noonnope, That works!!! 
Thank you so much. I’d spent ages applying z-index:400 to the ul ul menu elements. And z-index:1 to the images, etc., underneath the dropdown.
Your solution was simple and worked straightaway. Awesome!
You’re welcome
Remember, it’s also about the parent elements and how they stack, not just about the block formatting context. Each element has an implied z-index, based on when it appears in the markup.
Because the header div appears in the markup before the home-top div, it has a smaller z-index implied value.
To clarify the IE7 "bug" that you run into the problem is that when you give an element a position other than static then IE7 and under automatically gives that element a z-index of zero.
This is incorrect behaviour and the default z-index for positioned elements should be “auto” which means treat the element as if it created a new stacking context, but any positioned descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one. (Effectively behave as though this immediate positioned parent had no z-index at all and the stacking level of the children should not be affected by this parent.)
Ie7 and 6 apply z-index:0 to positioned elements which means that effectively all its children are trapped inside this element that has a z-index of zero and cannot overlay other elements that have a higher z-index or the same z-index but follow later in the html.
Other browsers can escape from this parent and a child that has a high z-index can overlap other elements on the page (depending on the stacking level).
So in effect what noonope says is correct for IE in that ultimately it’s the positioned parent that decides whether an element will overlap or not. If the parent was non-positioned then an absolute child with a high z-index would indeed overlap other elements as it would not then be contained by that parent.
e.g.In this example the green box escapes the non-positioned parent and overlaps the element below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test {
background:blue;
width:300px;
height:200px;
margin-left:50px;
}
p {
position:relative;
z-index:2;
background:green;
top:175px
}
.test2 {
margin-top:-50px;
background:red;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div class="test">
<p>hello</p>
</div>
<div class="test2">test2</div>
</body>
</html>
If position:relative is now added to the elements then IE6/7 traps the green box while other browsers still give the same display as before.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test {
background:blue;
width:300px;
height:200px;
margin-left:50px;
position:relative;
}
p {
position:relative;
z-index:2;
background:green;
top:175px
}
.test2 {
margin-top:-50px;
background:red;
width:300px;
height:200px;
position:relative;
}
</style>
</head>
<body>
<div class="test">
<p>hello</p>
</div>
<div class="test2">test2</div>
</body>
</html>
I thought it worth explaining
Thanks for the further clarification, noonnope and Paul O’B!