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.

Answer 2

См. в этой теме . Я столкнулся с той же проблемой, что и вы, но следуя этой идее, я решил ее.

Все, что мне нужно было сделать, это указать значения 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}