CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Internet Explorer и z-index

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

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

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

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

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

В коде идут подряд два блока с 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

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

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

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

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

решение?

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

В конце

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