IE7下z-index混乱问题（转）

时间：2021-11-25 16:38:01

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

直接上例子：

Html代码代码  IE7下z-index混乱问题（转）
  1. <div id="container">
  2. <div id="box1">This box should be on top</div>
  3. </div>
  4. <div id="box2">
  5. This box should not be on top;
  6. IE however seems to create a new stacking context for positioned elements,
  7. even when the computed z-index of that element is 'auto'.
  8. </div>
Css代码代码  IE7下z-index混乱问题（转）
  1. body { margin: 0; padding: 0; }
  2. #container { position: relative;}
  3. #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }
  4. #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

效果:

1.png

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

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

修改后的css代码代码  IE7下z-index混乱问题（转）
  1. body { margin: 0; padding: 0; }
  2. #container { position: relative; z-index:30;}
  3. #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
  4. //box1有没有z-index都无所谓了，但必须同position（relative或absolute）使用,就跟一个人
  5. //生不了孩子一样，需要配合。
  6. #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

效果:

2.png

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

尼玛的，现在通过google发现只要百度z-index就可以找到答案了，搜索也是一门技术活啊!!!!!!!!!!!!!!!!!!!!!!

相关文章