IE 6 & amp; IE 7 Z-Index Problem

Meisten Antworten hier sind falsch, einige Arbeit, aber nicht für den Grund, den Sie angeben. Hier einige Erklärungen.

Dies ist, wie der z-index sollte die Arbeit nach die Skillung:

• können Sie eine z-index Wert für jedes element, wenn Sie nicht, es wird standardmäßig auf auto
• positionierte Elemente (d.h. Elemente mit ein position Attribut unterscheidet sich von der Standard -static) mit einem z-index anders aus auto erstellen Sie eine neue stacking-context. Stacking-Kontexten sind die "Einheiten" von überschneidungen; eine stacking-context ist entweder komplett über die andere (das heißt, jedes element des ersten, ist über jedem element der zweiten) oder ganz unten.
• innerhalb der gleichen stacking-context, der stack-Ebene der Elemente verglichen werden. Elemente mit einer expliziten z-index Wert haben, der Wert als ein stack-level, andere Elemente Erben von Ihren Eltern. Das element mit dem höheren stack-level wird angezeigt, auf der Spitze. Wenn zwei Elemente haben den gleichen stack-Ebene, in der Regel diejenige, die später in den DOM-Baum ist gemalt an der Spitze. (Komplizierter Regeln gelten, wenn Sie einen anderen position Attribut.)

In anderen Worten, wenn zwei Elemente haben z-index gesetzt, um zu entscheiden, welche anzeigen auf der Oberseite, die Sie brauchen, um zu überprüfen, ob Sie irgendwelche positioniert Eltern, die haben auch z-index gesetzt. Wenn Sie nicht, oder die Eltern sind Häufig, das man das mit dem höheren z-index gewinnt. Wenn Sie das tun, werden Sie brauchen, um zu vergleichen, der Eltern und der z-index der Kinder ist irrelevant.

Also die z-index entscheidet, wie das element platziert ist im Vergleich zu anderen Kindern seiner "stapeln " Eltern" (die nächsten Vorfahren mit einer z-index - set und ein position von relative, absolute oder fixed), aber es spielt keine Rolle, wenn im Vergleich zu anderen Elementen; es ist das stapeln der Eltern z-index (oder möglicherweise die z-index des stacking-Eltern-stacking Eltern, et cetera), die zählt. In einem typischen Dokument, wo Sie z-index nur auf ein paar Elemente wie dropdown-Menüs und der popups, keine von denen enthält, die andere, die stapeln Eltern aller Elemente, die eine z-index ist das gesamte Dokument, und Sie können in der Regel Weg mit dem denken der z-index als globales Dokument-level-Bestellung.

Den grundlegenden Unterschied mit IE6/7 ist, dass positionierte Elemente beginnen neue stacking-Kontexten, ob Sie z-index gesetzt sind oder nicht. Da die Elemente, die Sie würde instinktiv zuordnen z-index Werte sind in der Regel absolut positioniert und haben einen relativ positionierten Eltern oder nahe Vorfahren, dies bedeutet, dass Ihre z-index-ed-Elemente werden nicht verglichen, sondern deren positioniert Vorfahren werden - und da diese keine z-index setzen, ein Dokument, um sich durchsetzen wird.

Als eine Problemumgehung, die Sie brauchen, um herauszufinden, welche Vorfahren sind eigentlich im Vergleich, und weisen die z-index, um Sie zum wiederherstellen der Reihenfolge, die Sie wollen (das wird in der Regel umgekehrter dokumentreihenfolge). Dies erfolgt in der Regel durch javascript - für ein dropdown-Menü, können Sie zu Fuß durch das Menü Container oder übergeordneten Menüpunkte, und ordnen Sie Ihnen eine z-index von 1000, 999, 998 und so weiter. Eine andere Methode: wenn ein popup-oder dropdown-Menü, das sichtbar wird, finden alle seine relativ positionierten Vorfahren, und geben Sie eine on-top Klasse, die hat einen sehr hohen z-index; Wann wird es wieder unsichtbar, entfernen Sie die Klassen.

InformationsquelleAutor der Antwort Tgr

Willkommen, ich habe das problem gelöst mit:

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

InformationsquelleAutor der Antwort remx

Ich habe vor kurzem hatte ein ständiges problem der Anzeige eine Schicht über der anderen. In meinem Fall war ich programmgesteuert erstellen von zwei Ebenen in Javascript, eine für diaplaying ein custom control und einer für die Erstellung von Vollbild-Schicht dahinter. FF war in Ordnung, bu IE angezeigt, der full-screen-Schicht, die immer oben auf alles andere.

Nach zahlreichen Schleppnetze über das interweb, versucht, alle Anregungen, die einzige Möglichkeit, die ich letztendlich bekommen, dass es Arbeit war das entfernen der position: Attribute von beiden Ebenen, und ändern Sie die margin-top: Attribut, bis ich ein zufriedenstellendes Ergebnis.

Etwas von einem hash, aber es funktioniert und es wird gut sein, bis IE 8 sortiert alle aktuellen bugs......

InformationsquelleAutor der Antwort