родительская проблема zIndex IE6 и IE7

Для меня это понятно. Мне нужно поставить div 2 перед div 3. Как я могу сделать это в IE6 и IE7. Все остальные браузеры работают нормально. Вот мой код.родительская проблема zIndex IE6 и IE7

CSS

div { 
     position:absolute; 
    } 
    #div1 { 
     background:#0F9; 
     top:0; 
     left:0; 
     width:500px; 
     height:400px; 
    } 

    #div2 { 
     background:#C00; 
     top:20px; 
     left:280px; 
     width:100px; 
     height:100px; 
     z-index:3; 
    } 

    #div3 { 
     background:#006; 
     top:10px; 
     left:10px; 
     width:300px; 
     height:200px; 
     z-index:2; 
    }

Código

<div id="div1"> 
    <div id="div2"></div> 
</div> 

<div id="div3"></div>

источник

2010-06-22 Leo

Internet Explorer z-index bug? См.

Вам необходимо явно установить z-index для вашего «#div1». Просто установите #div1 { z-index: 0; } и ваша проблема решена.

http://www.webdevout.net/test?01c

источник

2010-06-22 19:35:39

Эти 2 ответа не помогают мне. Мне нужно поставить div 3 между div1 и div 2. И эти ответы. Один положил div1 перед div3, а другой дублировал div, и я не могу этого сделать. Кто-то может мне помочь? – Leo

Если я явно #div на z-index: 0 # div3 будет перед # div2. Это решение не работает. – Leo

Лучшее решение, используйте вспышку! : -/ – Leo

Я проверил следующее в IE6/7/8, Chrome и Firefox. Это ставит #two в между #one и #three

HTML:

<html lang="en"> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div id="content"> 
     <div id="one">One</div> 
     <div id="two">Two</div> 
     <div id="three">Three</div> 
    </div> 
    </body> 
</html>

CSS: не

#one{ 
    background-color: #f1f1f1; 
    position: absolute; 
    left:105px; 
    top:155px; 
    z-index: 0; 
} 
#two{ 
    background-color: #c9c9c9; 
    position: absolute; 
    left:100px; 
    top:145px; 
    z-index: 1; 
} 
#three{ 
     background-color: #888888; 
     color: #f1f1f1; 
     position: absolute; 
     left:95px; 
     top:135px; 
     z-index: 2; 
}

в действии: http://www.webdevout.net/test?02C

источник

2010-06-23 16:08:19 HurnsMobile

Но таким образом вы изменили html, и я не могу измениться. У вас есть другое решение? – Leo

Насколько я знаю, не существует известное решение для эта проблема, так как # div1 автоматически получает «z-index: 0» в IE7, что предотвращает перекрытие # div2 от #div 3.

Чтобы сделать FF и Chrome более похожими на IE7, добавьте «z-index: 0» ко всем элементам без указанного «z-index». Это не решит вашу проблему, но может облегчить тестирование.

источник

2011-05-19 11:44:21

Это не совсем правильно: в IE7 любой элемент без явного zIndex рассматривается как рендеринг «естественного прогрессирования», поэтому неявный стек zIndex увеличивается по мере продвижения вниз по странице. Элементы с явным свойством «position» создают новый контекст стекирования (внутри уже примененного неявного) и поэтому влияют только на их дочерние элементы. Вот почему отношения z-index в IE (до 8) по своей сути нарушаются! Поэтому было бы намного сложнее воспроизвести это поведение в машинах Webkit/Gecko, чем вы подразумеваете! – Chris

родительская проблема zIndex IE6 и IE7

ответ

Смежные вопросы