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 では、オーバーレイが表示されると、最初のコンテナー モジュールのコンテンツを正しくカバーしていますが、2 番目のコンテナー モジュールのコンテンツは「透けて見えます」。

他の誰かがこの動作に遭遇しましたか? また、それを解決するための推奨される方法はありますか?

ありがとう！

4

3 に答える 3

1

オーバーレイは最初のモジュール内にあります。

したがって、最初のモジュールもカバーしない限り、2番目のモジュールをカバーすることはできません。（最初のモジュールがカバーするものだけをカバーできます）。

両方のモジュールの外に移動し、おそらくposition: absoluteCSSに追加する必要があります。

于 2009-08-19T21:20:48.937 に答える
1

このスレッドを参照してください。私はあなたと同じ問題に直面していましたが、そこのアイデアに従って修正しました。

私がしなければならなかったのは、目的の積み重ね順序に従って、すべてのコンテナー要素の z-index 値を指定することだけでした。

于 2009-11-11T09:24:02.333 に答える
0

コンテナを正しくカバーするには、overlaydivを絶対に配置する必要があります。また、コンテンツコンテナごとに、設定した方法でオーバーレイを作成する必要があります。

.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 に答える