Index-z in ie6


<div id="001" style="width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">
  001
  <div id="002" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:4">
    002
  </div>
</div>
<div id="003" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:2">
  003
</div>

I have 3 DIV, DIV 001 and DIV 003 are top DIV, DIV 002 is the sub DIV from DIV 001.
All the DIV position are absolute. It is not allow me to change the DIV level and position in my whole code.

I want DIV 001 in the below, DIV 003 in the middle, DIV 002 in the top.

I set DIV 003 with a low z-index, DIV 002 with a high z-index and not set any z-index for DIV 001. It is show correct in IE8, FIREFOX3.6, OPERA10 and Safari4, but show wrong in IE6: DIV 003 is alwways on the top of DIV 002.
How can I do?

SP is on the right track, but your solution will NOT do what he’s asking.

See, z-index is always RELATIVE to the parent, so if he sets a z-index on #001, #003 will always be over or under #001 or #002 regardless of what #002 is set for.

Basically:

if
#001 is set to z-index:1
#002 is set to z-index:4
#003 is set to z-index:2

#002 will appear over #001 and under #003

if
#001 is set to z-index:3
#002 is set to z-index:1
#003 is set to z-index:2

#003 will appear under #001 and #002

By omitting the z-index OP is able to position #002 over #003 in standards compliant browsers, but is SOL with that markup in regards to placement in IE.

Best bet is to get #002 out of #001, or to not use absolute positioning on it and maybe try some negative margin tricks instead. Might also be worth looking at NOT absolute positioning #001 and relative positioning it instead, or moving #003 into #001 so it’s a sibling element.

Though with so much absolute positioning going on in such a odd nesting, I would kind-of assume there’s something horribly flawed with the markup/layout this is being put into. I’d have to see what’s ACTUALLY being done on the page in question, but this SMELLS of over-complicating something simple.

If you remove the stacking context (positioning) from the parent (#001) then you can interweave the elements in IE6 as they will then all share the same stacking context (the viewport).

e.g.


<div id="a001" style="width:100px ;height:50px; border:1px solid #999; background:green;"> 001
    <div id="a002" style="margin-top:10px; margin-left:20px; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:4"> 002 </div>
</div>
<div id="a003" style="top:20px; left:20px; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:2"> 003 </div>

However that’s not very stable because they are now relative to the viewport so better to add a parent and do this instead.


<!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 type="text/css">
.wrap {
    width:100&#37;;
    position:relative;
}
#one {
    width:100px;
    height:50px;
    border:1px solid #999;
    background:green;
}
#two {
    top:40px;
    left:40px;
    width:100px;
    height:50px;
    border:1px solid #999;
    background:red;
    position:absolute;
    z-index:4
}
#three {
    top:20px;
    left:20px;
    width:100px;
    height:50px;
    border:1px solid #999;
    background:yellow;
    position:absolute;
    z-index:2
}
</style>
</head>
<body>
<div class="wrap">
    <div id="one"> 001
        <div id="two"> 002 </div>
    </div>
    <div id="three" style="">003 </div>
</div>
</body>
</html>



Don’t forget the units on your dimensions or browsers will treat them as zero when using a strict doctype. Also ids can’t begin with a digit.

As Jason said above you could probably do this more simply with a few negative margins depending on the situation.

IE 6 and 7 have a z-index bug. They use “0” for “auto” instead of “auto” (which is the default).

You’ll have to set a z-index on the parent div (001) and then adjust the others accordingly. Right now you’ve left it at its default by listing no z-index at all, which is fine according to the specs and the other browsers deal with it correctly.

http://annevankesteren.nl/2005/06/z-index