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

У меня есть три DIV, примерно так:

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

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

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

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

* {
    z-index: 1
}

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

Что на самом деле происходит с z-индексами в IE?