来源：http://jacobcookie.iteye.com/blog/1876426

浏览器兼容性问题太让人蛋疼了，今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决，毕竟要从用户的角度着想。百度了好多还是无法解决，最后google了一下，找到了方法。

直接上例子：

Html代码代码：

    <div id="container">

        <div id="box1">This box should be on top</div>

    </div>

    <div id="box2">

       This box should not be on top;

       IE however seems to create a new stacking context for positioned elements,

       even when the computed z-index of that element is 'auto'.

     </div>

Css代码代码：

    body { margin:; padding:; }

    #container { position: relative;}

    #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:; }

    #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index:;}

效果:……（就是没有实现z-index所指的效果呵呵）

这是为什么呢？其实这是IE浏览器的一个BUG——在IE浏览器中，定位元素会产生一个新的stacking context，并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。

在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。

修改后的css代码代码：

    body { margin:; padding:; }

    #container { position: relative; z-index:;}

    #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }

    //box1有没有z-index都无所谓了，但必须同position（relative或absolute）使用,就跟一个人

    //生不了孩子一样，需要配合。

    #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index:; }

效果:……（就是实现了z-index属性所指的效果了呵呵）

要想覆盖住父级的同级 ，父级的z-index就必须别的大，这就跟拼老爸一样，老爸强你就强，这就是传说中的哲学啊。

=================================================================

下面来自：http://blog.sina.com.cn/s/blog_77187555010133cv.html

=================================================================

z-index 有时候设置了很高的值如:z-index:999; 但是最后在IE7中却达不到我们想要的效果，设置了z-index还是被遮盖了。
因为其实是IE7的渲染DOM的问题，当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。
 
解决办法：在父容器中加上z-index值就可以了。z-index属性必须与position配合用，否则不会生效的。

================================================================

下面来自：http://zhidao.baidu.com/link?url=x0uD04htpjH7JnMVukwHI4cI-9X-2GkEqHKWb0z9y-OTHTujieKO5cI2tbLm0hxQSHgl-LekmaUz6POdT-k3C_

================================================================

E6和IE7有一个bug，如果只是对一个子元素设定z-index，这个值再高，也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值。例如这样
<body>
    <div class="container">
        <div class="test"></div>        
    </div>

</body>

假如你已经定义了 .test {position:absolute; z-index:9999;}，如果要让这个样式在IE6、IE7下面生效的话，就还要在container的div里面加一句：
.container {z-index:100;}
如果container还有一个父元素，就要在那个父元素上也定义一个z-index的值才行。。。

【转】关于IE7 z-index问题完美解决方案的更多相关文章

  1. Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案

    原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...

  2. 关于Entity Framework中的Attached报错的完美解决方案终极版

    之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...

  3. ecshop之transport和jquery冲突之完美解决方案

    众所周知:ecshop的transport.js文件和Jquery是冲突的,两个文件不能同时调用,现给出以下完美解决方案:原因分析:在transport.js文件中,大概 580行到590行之间,这个 ...

  4. .NET领域最为流行的IOC框架之一Autofac WebAPI2使用Autofac实现IOC属性注入完美解决方案 AutoFac容器初步

    .NET领域最为流行的IOC框架之一Autofac   一.前言 Autofac是.NET领域最为流行的IOC框架之一,微软的Orchad开源程序使用的就是Autofac,Nopcommerce开源程 ...

  5. No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案

    No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案 首先这个问题的产生是由于缺少Theme.App ...

  6. Xcode6.1标准Framework静态库制作方法。工程转Framework，静态库加xib和图片。完美解决方案。

    http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加x ...

  7. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

  8. C#多线程解决界面卡死问题的完美解决方案

    C#多线程解决界面卡死问题的完美解决方案 文章转自http://www.sufeinet.com/thread-3556-1-1.html 问题描述: 当我们的界面需要在程序运行中不断更新数据时, 当 ...

  9. 完美解决方案,可排除DATASET不支持System.Nullable错误

    完美解决方案,可排除DATASET不支持System.Nullable错误 using System; using System.Collections.Generic; using System.L ...

  10. Android消息推送完美解决方案全析

    推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原因,Android消息推送我们不得不大费周折.本文就是用来和大家共同探讨一种Android消息推 ...

随机推荐

  1. coreData旧版本增加字段,新版本是否可以继续使用旧版本内容的测试(MagicalRecord的使用)

    coreData使用第三方库MagicalRecord, 参考文章:http://blog.csdn.net/kuizhang1/article/details/21200367 coreData数据 ...

  2. 步步入佳境---UI入门(4) --简单练习

    一,创建SingleViewApplication 1,UILabel的简单使用 UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(0, ...

  3. Python - 学习经验分享

    执行方式: 直接输入python进入命令行,进行单行输入执行,退出后不保存. python filename.py或./filename.py 直接执行脚本文件 脚本格式: #!/usr/bin/py ...

  4. Android 中如何获取 H5 保存在 LocalStorage 的数据

    主要分三步: 写个接口,接收 Js 回调 添加到 WebView 主动调用 Js 获取 比如我要获取保存在 LocalStorage 中的 userKey 字段: 1.写个接口,接收 Js 回调 pu ...

  5. 转载：CancellationToken

    http://www.cnblogs.com/Abbey/archive/2011/09/12/2174208.html 最近在学习.NET中的线程同步.其中一个重要的技术叫线程的取消(中止),涉及的 ...

  6. 触摸事件UITouch的用法

    触摸屏幕是iOS设备接受用户输入的主要方式,包括单击.双击.拨动以及多点触摸等,这些操作都会产生触摸事件. 在Cocoa中,代表触摸对象的类是UITouch.当用户触摸屏幕后,就会产生相应的事件,所有 ...

  7. day3-Python集合、函数、文件操作，python包的概念

    本节大纲: 1 python程序由包(package).模块(module)和函数组成.包是由一系列模块组成的集合.模块是处理某一类问题的函数和类的集合. 2 包就是一个完成特定任务的工具箱. 3 包 ...

  8. dedecms内容页 上下篇 添加文章描述方法

    dedecms5.7修改后 运行正常! 在根目录include文件夹中修改arc.archives.class.php文件,812行左右:为$query添加查询字段arc.description,分别 ...

  9. linux 网络联接

    安装完进入系统以后需要配置ip 方法一:图形界面直接配置,在system下的prefrecens下面的network下面设置 方法二: 在安装虚拟机的时候选择“bridge networking ”网 ...

  10. 听VOA还不如学这些 （转自知乎恶魔奶爸）

    该专栏文章网址 http://zhuanlan.zhihu.com/aisapo/19634180 鉴于知乎无法插图片和音频,所以有了这篇教程集合,大家看这个就足够了其实 每次一学英语,材料无非就是V ...