zoukankan      html  css  js  c++  java
  • IE7 zindex失效

    BUG:z-index 有时候设置了很高的值如:z-index:999; 但是最后在IE7中却达不到我们想要的效果,设置了z-index还是被遮盖了。

    原因:因为其实是IE7的渲染DOM的问题,当它的父级容器被定位(显示设置了position属性, 如position:relative)的时候,子元素的z-index属性会被重置(我测试的结果显示z-index等于0)。
     
    解决办法:在设置了position属性的父容器中加上z-index值就可以了。z-index属性必须与position配合用,否则不会生效的(PS:父容器没有position属性也不会出现这个BUG)。
     
    代码如下:
    父级元素设置了定位属性position;
    <div style="position:relative;"> 
        <div style="position:absolute;100px;height:100px;background:red;z-index:100;"></div> 
    </div> 
    
    <div style="position:absolute;100px;height:50px;background:black;z-index:10;"></div> 

      IE7显示如下:      标准浏览器显示:

    给父级定位元素设置z-index;

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

      IE7显示如下:      标准浏览器显示:

     
  • 相关阅读:
    vue修改项目名
    CAS5.3.0安装部署
    nginx 10054报错问题解决方案
    react安装 项目构建
    oracle ORA-00119, ORA-00132问题解决
    SQL Server
    centos7设置httpd
    centos7 firewalld 开放端口
    java日期间相隔年月日计算
    PLSQL僵死
  • 原文地址:https://www.cnblogs.com/webhelper/p/3459569.html
Copyright © 2011-2022 走看看