Internet Explorer и z-index

[Makha]

Так как искала долго, то поделюсь и сохраню на память статью.
Периодически все же приходится поддерживать ИЕ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. ©