zoukankan      html  css  js  c++  java
  • ie7下z-index失效问题解决方法(详细分析)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03)

    点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index

    解决办法: 

    父级元素加上position:relative;并设置z-index. 
    父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. 
    <div style="position:relative;z-index=2"> 
    <p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p> 
    <div> 
    <div style="position:relative;z-index=1"> 
    ... 
    <div> 

    上面的例子中,倘若将第一个div的z-index设置为-1,则无论p的z-index为多少,多会被下面的div遮住。 
    相反,倘若下层div的z-index也设置成2,ie7正在解释时,会按照"position:relative"的层的顺序,自动叠加,即实际值是3. 
    没有加position属性时,所有值继承自父级。

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

     

    代码如下:


    <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> 



    ie7下显示为:

     【图片缺失了,百度个狗艹哩】

    黑色到了红色的上面。

    这是因为绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。

    解决办法就是给有定位属性的父元素设置z-index:

    代码如下:


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


    这样就可以正常显示了:

     【图片缺失了,百度个狗艹哩】

  • 相关阅读:
    检查型异常(Checked Exception)与非检查型异常(Unchecked Exception)
    maven跳过单元测试-maven.test.skip和skipTests的区别
    java JFR
    Docker常用命令
    关键字group by 、 Having的 用法
    css特效
    sql
    初识Hibernate之理解持久化类
    Hibernate 搭建
    基本 SQL 之增删改查
  • 原文地址:https://www.cnblogs.com/ferron/p/4529808.html
Copyright © 2011-2022 走看看