zoukankan      html  css  js  c++  java
  • IE7下面zindex失效的问题

    今天遇到的问题是:

    在ie7下面出现这样的情况,自己元素(本意是z-index较高,上层)被盖住了,处在下层的情况,如图:

    需要的效果是:

    看下当时的代码:

    左边是被覆盖的框的代码,右边是pop_field的样式,看到z-index是999,比较高的。在ie8、ie9、chrome、ff下都是正常的,就是ie7不正常。这是怎么回事咧?

    查了下资料:

    原因:IE7的渲染DOM的问题,绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用
     
    解决办法:在父容器中加上z-index值就可以了。z-index属性必须与position配合用,否则不会生效的。
    比如这样的代码:
    <div style="position:relative;"> 
        <div style="position:absolute;z-index:100;100px;height:100px;background:red;"></div> 
    </div> 
    <div style="position:relative;"> 
        <div style="position:absolute;z-index:10;20px;height:20px;background:black;"></div> 
    </div> 

    希望黑色的div在红色div的下面,但是效果却是:

    改为:在父div上加上z-index后,因为子元素会继承父元素,及时z-index设置为1000,还是会在下面。

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

    效果好了:

  • 相关阅读:
    Vue 环境配置
    Vue-think脚手架
    搭建vue环境网站
    数组 还是 字符串
    javascript jquery console调试方法说明
    获取 stoken 或者id MVC写法
    它山之石
    Android学习笔记_44_apk安装、反编译及防治反编译
    (转)超级实用且不花哨的js代码大全
    Android学习笔记_43_网络通信之文件断点上传
  • 原文地址:https://www.cnblogs.com/fredshare/p/2923325.html
Copyright © 2011-2022 走看看