http://madisonlane.businesscatalyst.comIE 6 et IE 7 Index Z Problème
J'essaie d'obtenir le div # post signe de s'asseoir au-dessus du fond div #. Cela fonctionne très bien dans tous les navigateurs sauf IE6 & IE7. Quelqu'un peut-il voir quel est le problème ici?
Egalement, IE6 affiche un 198px supplémentaire en haut de div # bottom.
D'accord avec le commentaire du validateur - la validation aide généralement. Mais, si elle ne contient pas quelques pointeurs pour z-index dans IE: 0) éléments qui est z-index que vous manipulez devrait être sur le même niveau, c'est-à-dire. vous devriez installerez le z-index de #bottom et #body
si cela est impossible alors
2) IE parfois appliquer correctement l'habitude z-index à moins que les éléments òû postulent pour un position:relative . Essayez d'appliquer cette propriété à #bottom et #body (ou #signpost)
permettez-moi de savoir comment cela fonctionne sur
Darko
Je crois que cela est dû au bug bien connu qui a été corrigé en ajoutant "position: relative" à la feuille de style. –
Ce comportement est dû au fait qu'IE6/7 démarre un nouvel ordre d'empilement pour chaque élément ayant la position: relative. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ – hitautodestruct
Il me semble que vous avez un code HTML mal formé. J'ai essayé de compter, et peut-être j'ai 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 HTML Validator du W3C, ou autre) et corrigez certaines des erreurs. Cela m'a aidé avec ce genre de problèmes dans le passé. Bonne chance!
J'ai eu récemment un problème constant l'affichage d'une couche au-dessus des autres. Dans mon cas, je créais par programmation deux couches en Javascript, l'une pour diaplayer un contrôle personnalisé et l'autre pour créer un calque en plein écran derrière lui. FF était bien, bu IE affiché la couche plein écran toujours au-dessus de tout le reste.
Après plusieurs recherches sur l'interweb, essayant les suggestions de tout le monde, la seule façon de le faire fonctionner était de supprimer les attributs position: des deux couches et de modifier l'attribut margin-top: jusqu'à obtenir un résultat satisfaisant.
Un peu d'un hachage, mais il fonctionne et ce sera bien jusqu'à ce que IE 8 trie tous les bugs actuels ......
Je viens d'avoir ce problème et la solution 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 à l'index z 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 place '# Header' plus haut que' # Content' (qui est probablement un élément positionné). La relation entre l'index z de '# Header' et' # AlwaysOnTop' est sans importance. Voir ma réponse pour plus de détails. – Tgr
La plupart des réponses sont erronées; certains travaillent, mais pas pour la raison qu'ils disent. Voici quelques explications.
Voici comment z-index devrait fonctionner selon the spec:
z-index à tout élément; si vous ne le faites pas, la valeur par défaut autoposition attribut différent de la valeur par défaut static) avec un z-index différent de auto créer un nouveau contexte d'empilement . Les contextes d'empilement sont les «unités» de chevauchement; un contexte d'empilement est soit complètement au-dessus de l'autre (c'est-à-dire que chaque élément du premier est au-dessus de tout élément du second), soit complètement au-dessous.z-index ont cette valeur au niveau de la pile, les autres éléments héritent de leurs parents. L'élément avec le niveau de pile supérieur est affiché en haut. Lorsque deux éléments ont le même niveau de pile, généralement celui qui est plus tard dans l'arborescence DOM est peint en haut. (Règles plus complexes appliquent si elles ont un attribut position différent.)En d'autres termes, lorsque deux éléments ont z-index ensemble, afin de décider qui affichera sur le dessus, vous devez vérifier si elles en ont positionné les parents qui ont également z-index ensemble. Si ce n'est pas le cas, ou si les parents sont communs, celui qui a le plus grand z-index gagne. S'ils le font, vous devez comparer les parents, et le z-index des enfants est hors de propos.
Ainsi, le z-index décide comment l'élément est placé par rapport aux autres enfants de son « parent empilage » (l'ancêtre le plus proche avec un z-index ensemble et un position de relative, absolute ou fixed), mais il n'a pas d'importance lorsque l'on compare à d'autres éléments; c'est le z-index du parent de l'empilage (ou éventuellement le z-index du parent empilable du parent de l'empilage, 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 popups, dont aucun ne contient l'autre, le parent empileur de tous les éléments qui ont un z-index est le document entier, et vous pouvez habituellement sortir avec la pensée 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 démarrent de nouveaux contextes d'empilement, qu'ils aient z-index ou non. Puisque les éléments auxquels vous attribuez instinctivement des valeurs z-index sont généralement positionnés de façon absolue et ont un parent relativement proche ou un ancêtre proche, cela signifie que vos éléments z-index ne seront pas comparés du tout, mais que leurs ancêtres positionnés seront - et depuis ceux qui n'ont pas d'index z, l'ordre des documents prévaudra. Pour contourner le problème, vous devez trouver les ancêtres qui sont effectivement comparés et leur attribuer un index z pour restaurer l'ordre souhaité (qui sera généralement l'ordre inverse des documents). Habituellement, cela est fait par javascript - pour un menu déroulant, vous pouvez parcourir les conteneurs de menu ou les éléments de menu parent, et leur attribuer un z-index de 1000, 999, 998 et ainsi de suite. Une autre méthode: quand un menu déroulant ou une liste déroulante devient visible, trouvez tous ses ancêtres relativement positionnés, et donnez-leur une classe on-top qui a un z-index très élevé; quand il redevient invisible, supprimez les classes.
Merci de résoudre un mystère pour moi! :) J'ai eu ce problème avec la commande d'éléments et chaque fois que j'ai l'impression d'avoir recours à la magie noire pour le faire fonctionner. –
Bonne explication. C'est surprenant de voir combien de gens se trompent quand ils essaient d'expliquer ce bug. – riwalk
Merci pour votre explication. Cela m'a aidé à comprendre et corriger ce même bug dans un projet sur lequel je travaille. – Julian
Bienvenue, je résolu le problème avec:
.header {
position: relative;
z-index: 1001;
}
.content {
position: relative;
z-index: 1000;
}
la seule solution fiable est, pour les éléments supérieurs ci-dessous dans le code, puis de les pousser au-dessus les autres choses avec le positionnement absolu.
par exemple. Wordpress: mettre la navigation dans le fichier de pied de page, mais toujours à l'intérieur de l'encapsuleur de la page.
pourrait également apporter des avantages pour les moteurs de recherche, car ils peuvent directement commencer par le contenu, sans ramper dans le menu premier ...
MISE À JOUR: Je dois me corriger. Tout en mettant l'élément ci-dessous et en le repoussant est toujours le moyen le plus facile, il y a certains cas où cela n'est pas possible dans un délai raisonnable. Puis vous devez vous assurer que chaque élément parent a une sorte de positionnement et un index z sensuel. Ensuite, l'index z devrait fonctionner à nouveau, même dans IE7.
Ironiquement, cela fonctionne très bien dans IE8 – Chris