IE 6 et IE 7 Problème d'index Z

Question

http://madisonlane.businesscatalyst.com

J'essaie de faire en sorte que le div # sign-post soit assis au-dessus du div # bottom Cela fonctionne très bien dans tous les navigateurs sauf IE6 et IE7. Quelqu'un peut-il voir quel est le problème ici?

IE6 affiche également 198px supplémentaires en haut de div # bottom.

Answer 1

D'accord avec le commentaire du validateur - la validation aide généralement. Mais, si cela n'annonce pas quelques indications pour z-index dans IE:

1) les éléments dont vous manipulez l'index z doivent être au même niveau, c.-à-d. vous devriez définir l'index z de #bottom et #body

si ce n'est pas faisable alors

2) IE n’applique parfois pas correctement l’index-z, sauf si les éléments l’appliquent pour avoir un position:relative. Essayez d'appliquer cette propriété à #bottom et #body (ou #signpost)

laissez-moi savoir comment ça marche

Darko

Answer 2

La plupart des réponses ici sont fausses; certains travaillent, mais pas pour la raison qu'ils disent. Voici quelques explications.

C'est ainsi que z-index devrait fonctionner selon la spécification :

• vous pouvez donner une valeur z-index à n'importe quel élément; Si vous ne le faites pas, la valeur par défaut est auto
• les éléments positionnés (c'est-à-dire les éléments avec un attribut position différent du nom par défaut static) avec un z-index différent de auto créent un nouveau contexte stacking. Les contextes d'empilement sont les "unités" de chevauchement; un contexte d'empilement est soit complètement au-dessus d'un autre (c'est-à-dire que chaque élément du premier est au-dessus de tout élément du second) ou complètement au-dessous de celui-ci.
• à l'intérieur du même contexte d'empilement, le niveau de pile des éléments est comparé. Les éléments avec une valeur explicite z-index ont cette valeur comme niveau de pile, les autres éléments héritent de leurs parents. L'élément avec le niveau de pile le plus élevé est affiché en haut. Lorsque deux éléments ont le même niveau de pile, généralement celui qui se trouve plus tard dans l’arborescence DOM est peint en haut. (Des règles plus compliquées s'appliquent si elles ont un attribut position différent.)

En d'autres termes, lorsque deux éléments ont défini z-index, afin de décider lesquels s'afficheront en haut, vous devez vérifier s'ils ont des parents positionnés qui ont également défini z-index. Si ce n'est pas le cas, ou si les parents sont communs, celui avec l'indice z le plus élevé gagne. S'ils le font, vous devez comparer les parents et le z-index des enfants n'a aucune pertinence.

Ainsi, le z-index décide comment l'élément est placé par rapport aux autres enfants de son "parent d'empilement" (l'ancêtre le plus proche avec un z-index ensemble et un position de relative, absolute ou fixed), mais cela n'a pas d'importance lors de la comparaison avec d'autres éléments; c'est le z-index du parent empileur (ou éventuellement le z-index du parent empilable du parent empilant, etc.) qui compte. Dans un document typique où vous utilisez z-index uniquement sur quelques éléments tels que les menus déroulants et les fenêtres contextuelles, aucun d’entre eux ne contenant l’autre, le parent empilable de tous les éléments ayant un z-index est l’ensemble du document et vous pouvez généralement vous en sortir. du z-index en tant que commande globale au niveau du document.

La différence fondamentale avec IE6/7 est que les éléments positionnés créent de nouveaux contextes d'empilement, qu'ils aient ou non z-index défini. Étant donné que les éléments auxquels vous attribuez instinctivement les valeurs z-index sont généralement positionnés de manière absolue et ont un parent ou un ancêtre proche positionné, cela signifie que vos éléments z-index- ne seront pas du tout comparés, mais que leurs ancêtres positionnés le seront - et ceux qui n'ont pas d'index z défini, l'ordre des documents prévaudra.

En guise de solution de contournement, vous devez rechercher les ancêtres réellement comparés et leur attribuer un index z afin de restaurer l'ordre souhaité (qui est généralement l'ordre inverse des documents). Cela se fait généralement par javascript - pour un menu déroulant, vous pouvez parcourir les conteneurs de menus ou les éléments de menu parents et leur attribuer un z-index de 1000, 999, 998, etc. Une autre méthode: quand un menu contextuel ou une liste déroulante devient visible, retrouvez tous ses ancêtres relativement positionnés et attribuez-leur une classe on-top ayant un très grand indice z; quand il redevient invisible, supprimez les classes.

Answer 3

Je viens d'avoir ce problème et le correctif que 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 son propre z-index qui est inférieur à z-index du noeud 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>

Answer 4

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

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

Answer 5

Il me semble que vous avez du code HTML mal formé. J'ai essayé de compter, et j'ai peut-être perdu le compte des balises d'ouverture et de fermeture, mais il semble que div # container n'est pas fermé. Essayez d'exécuter votre page via un validateur (tel que le validateur HTML du W3C ou quelque chose de ce genre) et de corriger certaines des erreurs. Cela m'a aidé avec ce genre de problèmes dans le passé. Bonne chance!

Answer 6

la seule solution fiable est de placer les éléments supérieurs ci-dessous dans le code, puis de les pousser plus les autres éléments avec un positionnement absolu.

par exemple. Wordpress: Place la navigation dans le fichier de pied de page, mais toujours dans le wrapper de page.

cela pourrait également apporter certains avantages aux moteurs de recherche, car ils peuvent commencer directement avec le contenu, sans passer par le menu en premier ...

UPDATE: Je dois me corriger. Bien que placer l’élément ci-dessous et le repousser reste le moyen le plus simple, il existe certains cas où cela n’est pas possible dans un délai raisonnable. Ensuite, vous devez vous assurer que chaque élément parent possède une sorte de positionnement et un index z sensé. Ensuite, le z-index devrait fonctionner à nouveau, même dans IE7.

Answer 7

J'ai récemment eu un problème d'affichage d'une couche au-dessus d'une autre. Dans mon cas, je créais par programme deux couches en Javascript, une pour afficher un contrôle personnalisé et une pour créer un calque plein écran derrière celui-ci. FF allait bien, mais IE affichait toujours le calque plein écran au-dessus de tout le reste.

Après de nombreuses chalutages sur l'interweb, en essayant les suggestions de chacun, le seul moyen de le faire fonctionner était de supprimer les attributs position: des deux couches et de modifier l'attribut margin-top: jusqu'à l'obtention d'un résultat satisfaisant.

Un peu de hachage, mais cela fonctionne et tout ira bien jusqu'à ce que IE 8 résolve tous les bogues actuels ......