在ie7下，如下代码会出现z-index覆盖混乱的问题：
1 <div style="position:relative;"> 2 <div style="position:absolute;z-index:100;100px;height:100px;background:red;"></div> 3 </div> 4 <div style="position:relative;"> 5 <div style="position:absolute;z-index:10;20px;height:20px;background:black;"></div> 6 </div>
ie7下显示为：
黑色到了红色的上面。
这是因为绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。
解决办法就是给有定位属性的父元素设置z-index：
1 <div style="position:relative;z-index:2;"> 2 <div style="position:absolute;z-index:100;100px;height:100px;background:red;"></div> 3 </div> 4 <div style="position:relative;z-index:1;"> 5 <div style="position:absolute;z-index:10;20px;height:20px;background:black;"></div> 6 </div>
这样就可以正常显示了：
