Z-индекс, блоки наложены друг на друга, ссылки в этих блоках превыше всего

Question

<style>
a { position:absolute; top:20px; color:#0F0; z-index:5; }
div { position:absolute; top:0; left:0; width:100%; height:50px; background:#066; }
.a { z-index:4; }
.b { z-index:3; }
.c { z-index:2; }
.d { z-index:1; }
.a a { left:10px; }
.b a { left:50px; }
.c a { left:100px; }
.d a { left:150px; }
</style>

<div class="a"><a href="#" title="">123</a></div>
<div class="b"><a href="#" title="">123</a></div>
<div class="c"><a href="#" title="">123</a></div>
<div class="d"><a href="#" title="">123</a></div>

Желание только одного, чтобы все ссылки были на блоках.В ie7 это сработало.

Чтобы выручить.

Answer 1

IE 7 не использует Z-индекс правильно

В основном.Никаких неожиданностей там нет.

Чтобы быть более понятным:

Когда вы добавляете позиционирование CSS к элементу и присваивает ему z-индекс (кроме auto), он создает новый контекст стека сновые уровни стекирования в новом контексте.

См .: Z-index и CSS Stack

Таким образом, ваши стекированные элементы div, как позиционированные, так и z-индексированные, имеютих собственный стековый контекст, поэтому будет показан только верхний.

Answer 2

Internet Explorer делает многие вещи неправильно.Другие браузеры, такие как Safari, Firefox и Chrome, делают это правильно.

position:absolute; означает, что top и left измерены как абсолютные, то есть в соответствии с границами документа.Вы заставили печатать все элементы в одной и той же позиции!