cssing :: Архив :: Internet Explorer и z-index

Internet Explorer и z-index

ИЕ воспринимает z-index не совсем так, как все остальные браузеры. Это поведение настолько часто встречается в моей жизни, что я решил о нём написать целый пост.
Меня часто просят поправить ошибки в верстке. Так вот эта — входит в топ-5.

z-index работает?

Да, совершенно точно работает. Берем два блока, с position:absolute (для работы z-index нужен либо relative либо absolute)
Задаем им обоим что-то такое:

1. #block1, #block2{
2. position:absolute
3. }
4. #block1{z-index:10}
5. #block2{z-index:20}

На самом деле, мне просто больше нравятся зеленые блоки.
Не обращайте внимания на Гитлера.

Блок с большим z-index отобразится поверх блока с меньшим z-index. Все как бы работает. И в IE в том числе.

работает, но…

Классическая обстановка для «проблемы в вёрстке».

В коде идут подряд два блока с position:relative. Например, два блока новости, или блоки вроде header и content. В relative ничего необычного нет, может добавили для absolute блоков внутри, или для хаков.
Как-то так:

1. <div class="entry"></div>
2. <div class="entry"></div>

И теперь, например, в одном из них появляется всплывающее окошко, или попап, или выпадающее меню:

1. <div class="entry">
2. <div class="popup">Попап</div>
3. </div>
4. <div class="entry"></div>

И такой вот дизайн:

Попап должен находиться в блоке 1

Будь вы мной, вы написали бы такой CSS:

1. .entry{
2. position:relative
3. }
4. .popup{
5. position:absolute;
6. z-index:10;
7. top:10px;left:100px;
8. }

Если добавить цвета и размеры, все отобразится и правда так, как в дизайне.
Но, разумеется, не в ИЕ.

Там это будет выглядеть так:

Попап или выпадающее меню скроется за следующие блоки

Я это понимаю так: ИЕ сравнивает не только z-index блоков, но и z-index их родителей. Причем родительский важнее. В моем примере роль «родительского z-index» исполняет просто последовательность блоков в коде. Какие блоки дальше в коде, те и отобразятся поверх.

Я сделал специальный пример, смайлик из acid-теста будет улыбаться всем браузерам кроме ИЕ. (его улыбка зависит от этого вот поведения с relative блоками)

решение?

1. Убрать position:relative для .entry
2. Задавать разные z-index для .entry. В случае новостей это невозможно, они ведь генерируются симметрично. Однако когда у нас header и content, вполне подходит.

Может быть есть еще?

В конце

Мне не хочется называть это багом, поскольку для него требуется куча обстоятельств, скорее всего не описанных w3c. (или описанных?)
Поведение имеет место в IE5-7. И, наверное, 8.
Как всегда буду рад вашему опыту и мыслям по этому поводу.
Статьи на тему этого поведения:

• Stacking context
• Effect of z-index value to positioned elements

XHTML/CSS, Полезности