index-z in ie6

[youlichika]

<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?

[Wickham]

I haven't got time to test your code, but on this page item 1 using position: relative and item 2 using position: absolute both work in all browsers including IE6 so maybe you can learn from them.
http://www.wickham43.net/layers.php

Another factor is that you should never name an id or class starting with a number so #001 for id="001" or .001 for class="001" is dangerous. Always use a letter fiirst like #div001 for id="div001" or .div002 for class="div002" although I doubt if that is causing your problem.

What happens if you put div 003 before div 002 ?


<div id = "001" style="width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">001
</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>
<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>