3

鉴于这种情况：

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 中，当显示覆盖时，它正确地覆盖了第一个容器模块中的内容，但第二个容器模块中的内容“显示通过”。

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

谢谢！

4

3 回答 3

1

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

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

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

于 2009-08-19T21:20:48.937 回答
1

看到这个线程。我和你面临同样的问题 - 但按照那里的想法为我解决了这个问题。

我所要做的就是根据所需的堆叠顺序为所有容器元素指定 z-index 值。

于 2009-11-11T09:24:02.333 回答
0

您需要绝对定位覆盖 div 以正确覆盖容器。并且您需要按照设置它们的方式为每个内容容器设置一个叠加层。

.container-module { height: 50px; z-index: 1; position:relative; }
.overlay { background: white; display: none; height: 200px; z-index: 10; position:absolute;top:0;left:0}
于 2009-08-19T21:19:57.630 回答