IE7浏览器z-index问题的解决方法

超、凢脫俗 2022-08-02 11:43 220阅读 0赞

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: 0; padding: 0; }  
    #container { position: relative;}  
    #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }  
    #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

效果：box1被box2覆盖。  
原因：其实这是IE浏览器的一个BUG——在IE浏览器中，定位元素会产生一个新的stacking context，并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。  
  
修改后的css代码

body { margin: 0; padding: 0; }  
    #container { position: relative; z-index:30;}  
    #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: 20; }

效果：box1把box2覆盖。  
  
要想覆盖住父级的同级 ，父级的z-index就必须别的大。

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关针对IE浏览器的兼容性ie7、ie8、ie9

相对于来说浏览器的兼容性对于小伙伴来说是很头疼的吧！今天我在修改代码的时候，对于var cvts = document.getElementsByClassName("ap

- 日理万妓/ 2022年09月16日 13:27/ 0 赞/ 435 阅读

相关 selenium 无法启动IE浏览器的解决方法

selenium 无法启动IE浏览器的解决方法参考文章： [（1）selenium 无法启动IE浏览器的解决方法][1_selenium _IE] （2）https:/

阳光穿透心脏的1/2处/ 2022年09月04日 00:39/ 0 赞/ 271 阅读

相关让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

博客来自：[http://blog.csdn.net/chenhongwu666/article/details/41513901][http_blog.csdn.n

男娘i/ 2022年08月18日 08:17/ 0 赞/ 395 阅读

相关 IE7浏览器z-index问题的解决方法

Html代码 <div id="container"> <div id="box1">This box should be on top</div>

超、凢脫俗/ 2022年08月02日 11:43/ 0 赞/ 221 阅读

相关解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的新标签元素的含义在我的博客里有介绍,这里我就不赘述了. HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。以下就介绍几种方式

一时失言乱红尘/ 2022年07月11日 12:04/ 0 赞/ 439 阅读

相关 IE8兼容IE7的方法

在Head中加入 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 还有一种方法是针对整个网

﹏ヽ暗。殇╰゛Y/ 2022年07月10日 04:06/ 0 赞/ 324 阅读

相关 checkbox的change事件（IE浏览器change事件问题及解决方法）

在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件。 $('document').ready(f

快来打我*/ 2022年06月06日 00:56/ 0 赞/ 1232 阅读

相关 IE浏览器调试默认是IE 7版本

碰到只能使用IE浏览器的前端项目代码，也真是无奈啊。。。问题描述：碰到一个比较古老的项目，当时只做了IE兼容，其他的浏览器打开样式非常乱，由于项目还在使用，又没有过多时

悠悠/ 2022年02月25日 09:59/ 0 赞/ 584 阅读

相关解决ActiveX被IE浏览器拦截的问题

现在各种间谍软件、\\\程序、流氓软件泛滥，使得用户根本不敢随便在网上下载软件代码，所以，作为真正为用户提供正版自主开发软件的您，一定要让最终用户放心下载您的软件代码，这样才能

Dear 丶/ 2022年01月16日 14:41/ 0 赞/ 409 阅读

相关 IE 浏览器使用问题

安全证书不可用使用浏览器（IE，Chrome）访问网页时，出现弹窗，提示“该站点安全证书的吊销信息不可用。”，如下： ![watermark_type_ZmFuZ3p

淩亂°似流年/ 2021年10月23日 14:16/ 0 赞/ 546 阅读