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

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 tocreate a new stacking context for positioned elements, even when thecomputed 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就必须别的大。