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 ?
Code:
<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>
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.