您的位置
主页 > 网站技术 > CSS/HTML > » 正文

IE7 设置z-index的覆盖问题的解决方法

来源: 站长圈 点击:

点评:在IE7及之前的版本中设置z-index的属性,没有生效。当父级元素若设置为position:relative时候,则子级元素的z-index属性会被覆盖,感兴趣的朋友可以参考一下!

在IE7及之前的版本中设置z-index的属性,确没有生效,查阅写资料,发现主要的结果和处理方法为: 

父级元素若设置为position:relative时候,则子级元素的z-index属性会被覆盖 

如 

复制代码代码如下:

<p style="position:relative;"> 

<p style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></p> 

</p> 

<p style="position:relative;"> 

<p style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></p> 

</p> 

在这种情况下,无论第一个red的z-index设置多高,都是会被第二个black所覆盖的 

解决的方案为,设置父级元素的z-index 

复制代码代码如下:

<p style="position:relative;z-index:2;"> 

<p style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></p> 

</p> 

<p style="position:relative;z-index:1;"> 

<p style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></p> 

</p> 

这样,red就会覆盖black 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明