IE7下z-index的兼容性问题

最近在做一个项目，其中一个页面有两个下拉列表，如图这个样子，红框框起来的是这两个下拉列表

当第一个下拉展开的时候，会出现下图所示的情况：

即会被第二个下拉遮住，原来在IE7下,会出现z-index覆盖混乱的问题：若一个页面中有多个并列的带有定位属性（relative/absolute）的父元素，若他们的z-index值相同，则位置越靠后的父级元素层级越高，举个例子：

<div style="position:relative;z-index=2"> 
<p style="position:absolute;z-index=99"> ...(要在上层显示的内容）</p> 
<div> 
<div style="position:relative;z-index=2"> 
... 
<div> 

上面的例子中，父级元素的z-index都为2，但ie7在解释时，会按照"position:relative"的层的顺序，自动叠加，所以第二个父级div实际层值是3.，所以第二个会覆盖第一个。 

没有加position属性时，所有值继承自父级。

解决的就是给带有定位属性的父级元素加上z-index属性，且越靠下层级越低。

拿上面的例子来说，解决办法为：

<div style="position:relative;z-index:2;"> 
<div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div> 
</div> 
<div style="position:relative;z-index:1;"> 
<div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div> 
</div> 

这样就一切正常啦！

 

转载于:https://www.cnblogs.com/bnxf1/p/4710769.html