Не мога да получа скрит 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
Можете да го поставите в раздела за обвивка на тялото -- актуализирах отговора по-горе, вижте дали това работи за вас. - 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