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中。

Answer 2

请参阅 this thread 。我遇到了和你一样的问题 - 但是按照这个想法为我解决了这个问题。

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

Answer 3

您需要绝对定位叠加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}

IE7 CSS z-index覆盖

3 个答案: