ie7下z-index问题

在ie7下，如下代码会出现z-index覆盖混乱的问题：

1     <div style="position:relative;">
2         <div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div>
3     </div>
4     <div style="position:relative;">
5         <div style="position:absolute;z-index:10;width: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;width:100px;height:100px;background:red;"></div>
3     </div>
4     <div style="position:relative;z-index:1;">
5         <div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div>
6     </div>

这样就可以正常显示了：