IE7下position的z-index Bug解决方案

通常设置position后，通过z-index属性来设置div的层叠情况。 但是在IE7中，设置position后，z-index会失效。导致div的层叠出现问题。 具体效果可以看这个页面 http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html 以下分别是IE7与IE8之间的差别：

的确是一件很怪异的事情，查了许多资料终于找到了解决方案: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. So we giving the parent element a higher z-index actual fixes the bug

以上告诉我们，IE设置了position的元素会生成一个新的stacking context，导致 z-index 为0，所以才失效了。所以我们需要在这个元素的父元素上设置一个更高的z-index值。

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; } #content { width: 420px; padding: 20px; }

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

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

    不同于以上 我是在做下拉菜单时遇到的关于 IE7的position问题 跟IE6或者IE8不同的 IE7中下拉出来的内容显示正常 但当紧随的元素中“<a>”链接标记与下拉出的元素层叠时 下拉菜单会自动隐藏 导致无法完全正常使用下拉功能 所以在IE7中要对紧随于position的元素追加一个position 且z-index要设置为“负” 但问题是 被设置为“负”的层没有办法点击链接 这个很。。。