IE 6 & IE 7 Z-Index Problème

http://madisonlane.businesscatalyst.com

Je vais essayer d'obtenir le div#signe-poste de siéger au-dessus de la div#bas. Cela fonctionne bien dans tous les navigateurs, sauf IE6 & IE7. Quelqu'un peut-il voir quel est le problème ici?

Aussi IE6 est de l'affichage d'une supplémentaire 198px vers le haut de la div#bas.

Ironiquement, il fonctionne très bien avec IE8

InformationsquelleAutor mattt | 2009-03-23

20

D'accord avec le validateur commentaire - la validation est généralement utile. Mais, si elle n'a pas d'heres quelques conseils pour z-index dans IE:

1) les éléments qui la z-index vous êtes à la manipulation doit être sur le même niveau c'est à dire. vous devriez être en paramètre le z-index de #bas et #corps

si ce n'est pas possible,

2) IE a parfois l'habitude d'appliquer le z-index correctement à moins que les éléments ou sont en l'appliquant à avoir un position:relative. Essayez d'appliquer la propriété de #bas et #corps (ou n ° d'orientation)

laissez-moi savoir comment cela fonctionne

Darko
- Je crois cela est dû à la bien connue bug corrigé par l'ajout de "position:relative" à la feuille de style.
- Ce comportement est parce que IE6/7 pour un démarrage d'un nouvel ordre d'empilement pour chaque élément qui a le position:relative. brenelz.com/blog/squish-the-internet-explorer-z-index-bug
InformationsquelleAutor Darko Z
152

La plupart des réponses ici sont faux; un peu de travail, mais pas pour la raison qu'ils disent. Voici quelques explications.

C'est de cette manière z-index devrait fonctionner selon le spec:
- vous pouvez donner un z-index de la valeur à n'importe quel élément; si vous ne le faites pas, la valeur par défaut est auto
- éléments positionnés (qui est, les éléments avec un position attribut différent de la valeur par défaut static) avec un z-index différente de auto créer un nouveau empilement contexte. Empiler les contextes sont les "parts" de chevauchement; un empilement contexte est complètement au-dessus de l'autre (qui est, à chaque élément de la première est au-dessus de tout élément de la seconde) ou complètement en dessous.
- l'intérieur d'un même contexte d'empilement, le niveau de la pile des éléments de comparaison. Les éléments explicites z-index valeur ont que la valeur qu'un niveau de la pile, d'autres éléments hériter de leurs parents. L'élément avec le plus haut niveau de la pile est affiché sur le dessus. Lorsque deux éléments ont le même niveau de la pile, généralement celui qui est le plus loin dans l'arborescence DOM est peint sur le dessus. (Plus compliqué règles s'appliquent que si elles ont un autre position attribut.)
En d'autres termes, lorsque deux éléments ont z-index, afin de décider qui sera afficher sur le dessus, vous devez vérifier si ils ont placé les parents qui ont aussi z-index ensemble. Si ils ne sont pas, ou les parents sont communs, l'un avec le z-index supérieur gagne. S'ils le font, vous devez comparer les parents, et les z-index des enfants n'est pas pertinent.

De sorte que le z-index décide comment l'élément est placé par rapport à d'autres enfants de son "empilement parent" (le plus proche de l'ancêtre avec un z-index et une position de relative, absolute ou fixed), mais il n'a pas d'importance lorsque l'on compare à d'autres éléments; c'est l'empilement des parents z-index (ou, éventuellement, la z-index de l'empilement parent d'empilage du parent, et cetera) qui compte. Dans un document typique où vous utilisez z-index seulement sur quelques éléments comme les menus déroulants et les pop-ups, dont aucun ne contient de l'autre, l'empilement parent de tous les éléments qui ont une z-index est l'ensemble du document, et vous pouvez généralement obtenir loin avec la pensée de la z-index mondial, au niveau du document de la commande.

La différence fondamentale avec IE6/7, c'est que les éléments en position de démarrer de nouveaux contextes d'empilement, qu'ils ont z-index définie ou pas. Puisque les éléments qui vous instinctivement attribuer z-index valeurs sont généralement en position absolue et relativement positionné parent ou d'un proche ancêtre, cela signifie que votre z-index-ed de ne pas être comparé à tous, au lieu placé leurs ancêtres va - et, depuis ceux qui ont pas de z-index établi, l'ordre du document prévaudra.

Comme une solution de contournement, vous devez savoir quels ancêtres sont en fait rapport, et d'attribuer le z-index pour eux de rétablir l'ordre que vous voulez (qui sera généralement inverser l'ordre du document). Habituellement, cela se fait en javascript - pour un menu déroulant, vous pouvez marcher à travers le menu des conteneurs ou des parent des éléments de menu, et de leur attribuer un z-index de 1000, 999, 998 et ainsi de suite. Une autre méthode: lorsqu'un popup ou menu déroulant devient visible, trouvez tous ses positionnée relativement ancêtres, et de leur donner une on-top classe qui a un très fort z-index; quand il devient invisible à nouveau, supprimer les classes.
- Merci à vous pour résoudre un mystère pour moi! 🙂 J'ai eu ce problème avec l'élément de commande et à chaque fois j'ai l'impression d'avoir recours à la magie noire pour le faire fonctionner.
- Bonne explication. Son surprenant de voir comment beaucoup de gens se trompent quand ils essaient d'expliquer ce bug.
- Merci pour votre explication. Il m'a aidé à comprendre et à corriger ce bogue dans un projet que je suis en train de travailler sur.
- Merci!!!! je n'ai jamais compris l'ordre d'empilement question avant. a toujours été un mystère pour moi pourquoi, parfois, il a travaillé et parfois, il na pas.
- Dans quelles circonstances cette méthode (ajout de z-index par rapport parent) ne fonctionne pas et s'il y a un autre travail autour?
- IE6 a un autre bug lié à positionnement vertical; certains éléments (par exemple <select> ou Flash) sont en quelque sorte en dehors du document, et il n'y a aucun moyen de la position des trucs au-dessus d'eux via z-index. Qui est normalement résolu en mettant un iframe entre eux et la fenêtre contextuelle.
- +1 Tgr. La chose que je suis mal, c'est la classe de base des CSS, je l'espère, pour les réutiliser dans de nombreux endroits. Je ne sais pas ce que le z-order peut-être que je vais vivre dans.
- Merci! Pour une liste déroulante ou pop-up type de widget qui doit toujours être au-dessus de tout, à l'aide de jQuery, c'est vraiment facile à corriger. Appelons $(myWidget).les parents().addClass ("on-top") lors de l'ouverture du widget, et $(myWidget).les parents().removeClass ("on-top") lors de la fermeture.
- qui a totalement fonctionné pour moi. Merci!!
- vous êtes dieu. vraiment.
- Bonne explication, ne sais pas ce. Le jQuery extrait de code a fonctionné pour moi aussi. Merci!
- Génial explication l'a bien compris! Merci beaucoup.
- Incroyable, merci! Passé du temps à essayer de débogage, (ce qui en soit est un absolu de la douleur) de lire votre post et il a réglé en quelques minutes, l'excellente explication ainsi!
- vraiment bonne réponse qui explique exactement le problème. Mon cas était un datetimepicker dans IE7, ce que j'ai fait a été d'ajouter le calendrier de l'objet pour le corps au lieu de le conteneur de contrôle, et il fixe. La façon dont je l'explique, c'est parce que le calendrier est dans le corps, alors que toutes les racines sont frères et sœurs, par conséquent, le zindex peut être géré correctement puisque tous les autres contrôles sont à l'intérieur de la forme, de la vrd, etc.
InformationsquelleAutor Tgr

J'ai juste eu ce problème et de le résoudre j'ai trouvé (grâce à Quirksmode) était de donner au parent direct du nœud que vous essayez de définir un z-index de sa propre z-index qui est, à moins que le z-index du nœud que vous essayez de définir. Voici un exemple rapide qui devrait fonctionner dans IE6

<html>
  <head>
    <style type="text/css">
      #AlwaysOnTop {
        background-color: red;
        color: white;
        width: 300px;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      #Header {
        color: white;
        width: 100%;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="Header">
      <div id="AlwaysOnTop">This will always be on top</div>
    </div>
    <div id="Content">Some long amount of text to produce a scroll bar</div>
  </body>
</html>

Cela fonctionne parce qu'il met #Header plus élevé que #Content (ce qui est probablement un élément positionné). La relation entre le z-index de #Header et #AlwaysOnTop n'est pas pertinent. Voir ma réponse pour plus de détails.

InformationsquelleAutor Jason Sperske

Bienvenue, j'ai résolu le problème avec:

.header { 
    position: relative;
    z-index: 1001;
}
.content {
    position: relative;
    z-index: 1000;
}

InformationsquelleAutor remx

0

Me semble que vous avez quelques code HTML mal formé là-bas. J'ai essayé de comptage, et peut-être que j'ai perdu le compte de l'ouverture et la fermeture des balises, mais il ressemble à div#container n'est pas fermé. Essayez de lancer votre page par le biais d'un programme de validation (comme le HTML du W3C Validator, ou de quelque chose) et la fixation de certaines erreurs. Qui m'a aidé avec ces sortes de problèmes dans le passé. Bonne chance!

InformationsquelleAutor Shalom Craimer
0

J'ai récemment eu un problème continu d'afficher un calque au-dessus de l'autre. Dans mon cas, j'ai été par programmation, la création de deux couches en Javascript, un pour diaplaying un contrôle personnalisé et un pour créer un plein écran de la couche derrière elle. FF était bien, bu IE affiche en plein écran couche toujours au-dessus de tout le reste.

Après de nombreuses chaluts sur l'interweb, essayez les suggestions de tout le monde, la seule façon que j'ai fini par obtenir ce travail était de supprimer position: attributs de deux couches, et de modifier les margin-top: attribut jusqu'à ce que j'ai obtenu un résultat satisfaisant.

Un peu de hachage, mais ça marche et ça va être bien jusqu'à ce que IE 8 trie tous les bugs......

InformationsquelleAutor
0

la seule solution fiable est de mettre le haut des éléments ci-dessous dans le code, puis pousser plus les autres trucs avec le positionnement absolu.

par exemple WordPress:
mettre la navigation dans le fichier de pied de page, mais toujours à l'intérieur de la page couverture.

peut aussi apporter des avantages certains pour les moteurs de recherche, car ils peuvent directement commencer avec le contenu, sans ramper à travers le menu de la première...

Mise à JOUR:
J'ai besoin de corriger moi-même. Tout en mettant l'élément ci-dessous, puis en le poussant plus est encore le moyen le plus facile, il y a certains cas où cela n'est pas possible dans un délai raisonnable. Puis vous avez à faire en sorte que chaque élément parent a une sorte de positionnement et de certains senseful z-index. Puis le z-index devrait fonctionner à nouveau, même dans IE7.

InformationsquelleAutor Waschbär

Vous devez vous connecter pour publier un commentaire.