Так как искала долго, то поделюсь и сохраню на память статью.
Периодически все же приходится поддерживать ИЕ7 и это про него:
читать дальше
ИЕ воспринимает z-index не совсем так, как все остальные браузеры.
z-index работает?
Да, совершенно точно работает. Берем два блока, с position:absolute (для работы z-index нужен либо relative либо absolute)
Задаем им обоим что-то такое:
#block1, #block2{ position:absolute } #block1{z-index:10} #block2{z-index:20}
Блок с большим z-index отобразится поверх блока с меньшим z-index. Все как бы работает. И в IE в том числе.

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

В коде идут подряд два блока с position:relative. Например, два блока новости, или блоки вроде header и content. В relative ничего необычного нет, может добавили для absolute блоков внутри, или для хаков.
Как-то так:
<div class="entry"></div> <div class="entry"></div>
И теперь, например, в одном из них появляется всплывающее окошко, или попап, или выпадающее меню:
<div class="entry"> <div class="popup">Попап</div> </div> <div class="entry"></div>
И такой вот дизайн:

Будь вы мной, вы написали бы такой CSS:
.entry{ position:relative } .popup{ position:absolute; z-index:10; top:10px;left:100px; }
Если добавить цвета и размеры, все отобразится и правда так, как в дизайне.
Но, разумеется, не в ИЕ.

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

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

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

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

В конце
Мне не хочется называть это багом, поскольку для него требуется куча обстоятельств, скорее всего не описанных w3c. (или описанных?)
Поведение имеет место в IE5-7. ©

Перейти к записи

@темы: Рабочие заметки, Наблюдения, Ссылки, Я