Не могу получить скрытый div сверху в ie6

Я использую JQuery, чтобы показать/скрыть div. Он отлично работает в большинстве браузеров, кроме IE6. Когда я показываю элемент div, он оказывается скрытым за другими элементами div, а не поверх них.

Вы можете увидеть, что я имею в виду здесь: http://www.urlgone.com/d055c5/ (http ://old.solesurvivorleather.com/static_product.html).

Если вы наведете указатель мыши на список адресов электронной почты в верхнем правом меню, вы увидите, что скрытый div listform t скользит вниз и отображается сверху, но в IE6 он скользит вниз за div-оболочкой тела.

Вот код CSS для обоих div:

#listform {
    background-color:#F4F4EF;
    border:1px solid #8F8A7E;
    display:none;
    margin:0;
    max-width:150px;
    padding:10px;
    position:absolute;
    right:0;
    text-align:left;
    top:30px;
    width:150px;
    z-index:999;
}
#body-wrapper, #utility-wrapper {
    margin:0 auto;
    position:relative;
    width:950px;
}
#body-wrapper {
    background-color:#FFFFFF;
    border:0 solid black;
    position:absolute;
}

jquery css xhtml internet-explorer-6
person Jesse    schedule 19.03.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

IE не обращает внимания на z-index интуитивно, когда речь идет о позиционированных элементах. Если вы переместите элемент #listform в конец кода (непосредственно перед </body>), IE должен отобразить все правильно.

В качестве альтернативы вы можете поместить свой элемент #listform в конец вашего #body-wrapper (непосредственно перед </div>). Это поместит элемент выше в стеке, чем все элементы, которые должны перекрываться. Поскольку ширина #body-wrapper фиксирована, он должен обеспечить стабильное вычисление смещения независимо от размера пользовательского окна.

person eug    schedule 19.03.2011
comment
Это действительно решило проблему, но затем у меня возникла проблема с правильным позиционированием div. Если он у меня есть за пределами div, мне нужно, чтобы он был в нем, он не будет отображаться непосредственно под списком адресов электронной почты слов. Насколько я понимаю, положение может варьироваться в зависимости от настроек экрана пользователей. Любые предложения, как это исправить? - person Jesse; 20.03.2011
comment
Вы можете поместить его внутри div-обертки тела - я обновил ответ выше, посмотрите, сработает ли это для вас. - person eug; 20.03.2011

arrow_upward
2
arrow_downward

В Internet Explorer позиционированные элементы создают новый контекст стека, начиная со значения z-index, равного 0. Поэтому z-index работает неправильно. Чтобы обойти эту проблему, дайте родительскому элементу position:relative и установите его z-index на тот же номер, что и дочерний элемент, для которого вы хотите установить z-index. Дочерний элемент также должен иметь position:absolute. Вот как это должно выглядеть.

<div style="position: relative; z-index: 10">
    <div style="position:absolute;z-index:10;">
        <img src"..." />
        ...
    </div>
</div>
person Hussein    schedule 20.03.2011

arrow_upward
0
arrow_downward

Вы пытались присвоить body-wrapper более низкое значение z-index?

person MCannon    schedule 19.03.2011