parent zIndex problème IE6 et IE7

Pour mon compréhension. Je dois mettre div 2 devant div 3. Comment puis-je faire cela dans IE6 et IE7. Tous les autres navigateurs fonctionnent normalement. Voici mon code.parent zIndex problème IE6 et 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>

Source

2010-06-22 Leo

Voir Internet Explorer z-index bug?.

Vous devez définir explicitement le z-index pour votre "#div1". Il suffit de définir #div1 { z-index: 0; } et votre problème est résolu.

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

Source

2010-06-22 19:35:39

Ce 2 réponses ne m'aident pas. J'ai besoin de mettre div 3 entre div1 et div 2. Et ces réponses. L'un met div1 devant div3 et l'autre duplique le div et je ne peux pas faire ça. Quelqu'un pourrait m'aider? – Leo

Si je #div explicitement à z-index: 0 # div3 sera devant # div2. Cette solution ne fonctionne pas. – Leo

Meilleure solution, utilisez le flash! : -/ – Leo

J'ai testé les éléments suivants dans IE6/7/8, Chrome et Firefox. Cela met #two entre #one et #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; 
}

En action: http://www.webdevout.net/test?02C

Source

2010-06-23 16:08:19 HurnsMobile

Mais de cette façon, vous avez changé le code HTML et je ne peux pas changer. Avez-vous une autre solution? – Leo

Pour autant que je sache, il n'y a pas de solution connue pour ce problème, puisque le # div1 obtient automatiquement un "z-index: 0" dans IE7, ce qui empêche le # div2 de chevaucher #div 3. Pour que FF et Chrome se comportent plus comme IE7, ajoutez "z-index: 0" à tous les éléments sans "z-index" spécifié. Cela ne résoudra pas votre problème, mais pourrait faciliter les tests.

Source

2011-05-19 11:44:21

Ce n'est pas tout à fait correct: dans IE7, tout élément sans zIndex explicite est traité comme un rendu de «progression naturelle», de sorte que la pile zIndex implicite augmente lorsque vous descendez la page. Les éléments avec une propriété 'position' explicite créent un nouveau contexte d'empilement (dans le contexte implicite déjà appliqué) et n'affectent donc que leurs éléments enfants respectifs. C'est pourquoi les relations z-index dans IE (jusqu'à 8) sont intrinsèquement brisées! Il serait donc beaucoup plus complexe de répliquer ce comportement dans les moteurs Webkit/Gecko que vous ne le pensez! – Chris

Répondre

Questions connexes