来源：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. BZOJ 4390 Max Flow

    同运输计划. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm ...

  2. http://182.92.241.20/mypro/login 偶的点金项目细化分包管理平台即将上线！！

    http://182.92.241.20/mypro/login            偶的点金项目细化分包管理平台即将上线!! 敬请期待! 项目外包利器 项目管理利器

  3. Svn win7系统下状态图标不显示-转载

    Svn win7系统下状态图标不显示 Svn版本 tortoisesvn-1.8.8.25755-x64-svn-1.8.10.msi 2.不显示图标状态如图1,期望结果显示图标状态如图2 图1 图2 ...

  4. office2010安装Microsoft Office Document Imaging (MODI) 图解

    office2010安装Microsoft Office Document Imaging (MODI) 图解     Microsoft Office 2010 中删除了 Microsoft Off ...

  5. Magento创建configurable产品的要点

    接着上一篇用API创建可配置的产品Configurable Product说事.Magento的产品类型可分为Simple Product.Group Product.Configurable Pro ...

  6. LeetCode Ugly Number （简单题）

    题意: 判断是一个数的质因子仅含有2,3,5这3个. 思路: 因子2比较容易解决,num/=num-(num&num-1)就可以了.3和5的需要通过循环来另判. C++ class Solut ...

  7. dedecms：织梦文章如何添加“自定义属性”标签（sql命令行工具）

    dede织梦如何添加“自定义属性”标签“症状” 1.进入后台——系统——SQL命令行工具——运行SQL命令行,添加arcatt表字段: insert into`dede_arcatt`(sortid, ...

  8. Eclipse 插件安装方法和插件加载失败解决办法

    一:是利用Eclipse Software  Update 添加网址,让Eclipse 自动的搜索下载最新的插件. 比如安装VE这个可视化编辑UI的插件,其步骤为 Help > Software ...

  9. C#堆栈讲解

    1:栈就是堆栈,因为堆和堆栈这样说太拗口了,搞得像绕口令,所以有些时候就把堆栈简称为栈.堆和栈,你看这又多舒服.但无论什么时候,堆栈都不等于堆和栈,必须说,堆和栈或者堆和堆栈. 2:值类型变量和引用类 ...

  10. Codeforces Round #285 (Div. 2) A B C 模拟 stl 拓扑排序

    A. Contest time limit per test 1 second memory limit per test 256 megabytes input standard input out ...