Как я могу получить желаемое поведение z-index из IE при использовании вложенных DIV?

У меня есть три DIV, что-то вроде этого:

<div id="header">
    ...
</div>
<div id="content">
    <div id="popup">
        ...
    </div>
</div>

Заголовок DIV # имеет значение «position: fixed» и используется как заголовок без прокрутки в верхней части экрана. Контент DIV # содержит некоторый контент и является «position: родственником». Всплывающее окно DIV # - «position: absolute», оно начинается скрытно и отображается при наведении курсора.

Я хочу, чтобы всплывающее окно было на самом высоком уровне на странице, чтобы оно перекрывало даже заголовок DIV #, если они перекрываются. Это отлично работает в Firefox, но в IE всплывающие окна находятся за заголовком. Я могу это исправить, установив z-index содержимого DIV # выше заголовка, но, конечно, содержимое DIV # также будет отображаться над заголовком DIV #, когда они перекрываются, что мне не нужно.

Похоже, на меня может повлиять то, что описано на этой странице . Однако, насколько я понимаю, что-то вроде установки z-index по умолчанию для всех элементов, например так:

* {
    z-index: 1
}

следует исправить это (так как теперь каждый элемент будет иметь явно заданный z-индекс 1), однако вместо исправления этого в IE он ломает его в Firefox (так что Firefox теперь ведет себя как IE).

Какова реальная сделка с z-индексами в IE?

11.12.2008 23:08:27
2 ОТВЕТА
РЕШЕНИЕ

В IE есть ошибка, которая, я думаю, исправляется в IE8, когда стек z-index сбрасывается для каждого положения относительного контекста, который существует на странице. Значение z-индекса в разных контейнерах с относительным расположением не зависит.

Ошибка, которую вы описываете, вероятно, связана. Попробуйте заменить положение относительно, поместив всплывающее окно на позицию щелчка мыши.

Другая ссылка: http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html

0
11.12.2008 23:52:17

Если всплывающее окно DIV # всегда должно отображаться поверх всех других элементов, почему бы просто не продвинуть его на верхний уровень в DOM?

<div id="header">
    ...
</div>
<div id="content">
    ...
</div>
<div id="popup">
    ...
</div>
0
12.12.2008 00:10:46
Ну, я стремился к семантической согласованности внутри тегов, но я сломался и попробовал это, просто чтобы посмотреть, сработает ли это, и столкнулся с другой проблемой, когда IE, казалось, не соблюдал z-index в заголовке DIV #, пока был "позиция: исправлена".
John 12.12.2008 03:13:52