关于IE7 z-index的浏览器兼容性问题完美解决方案

<div id="container">
<div id="box1">This box should be on </div>
</div>
<div id="box2">
This box should not be on ;
IE however seems to create a new stacking context for positioned elements,
even when the puted z-index of that element is 'auto'.
</div>

body { margin: 0; padding: 0; }
#container { position: relative;}
#box1 { position: absolute; : 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }
#box2 { position: absolute; : 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

body { margin: 0; padding: 0; }
#container { position: relative; z-index:30;}
#box1 { position: absolute; : 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有没有z-index都无所谓了，但必须同position（relative或absolute）使用,就跟一个人
//生不了孩子一样，需要配合。
#box2 { position: absolute; : 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }