css - IE7 CSS z-index 覆盖

Question

鉴于这种情况:

HTML

<div class="container-module">
    Some content.
    <a id="show-overlay" href="#">Show overlay</a>
    <div id="overlay">
        Overlay content.
    </div>
</div>
<div class="container-module">
    Some content.
</div>

CSS

.container-module { height: 50px; z-index: 1; }
.overlay { background: white; display: none; height: 200px; z-index: 10; }

JS

getElementById("show-overlay").onclick( function(){
    getElementById("overlay").style.display = "block";
    return false;
});

...在 IE7 中，当显示覆盖时，它正确地覆盖了第一个容器模块中的内容，但第二个容器模块中的内容“显示出来”。

有没有其他人遇到过这种行为？有什么推荐的解决方法吗？

谢谢!

Answer 1

您的叠加层位于第一个模块内。

因此，它不能覆盖第二个模块，除非第一个模块也覆盖它。 (它只能涵盖第一个模块涵盖的内容)。

您需要将它移到两个模块之外，并可能将 position: absolute 添加到它的 CSS。