it-swarm.com.de

IE 6 & IE 7 Z-Index-Problem

http://madisonlane.businesscatalyst.com

Ich versuche, das div # -Pfeil so zu platzieren, dass es über dem div # -Boden sitzt. Dies funktioniert gut in allen Browsern außer IE6 & IE7. Kann jemand sehen was das Problem hier ist?

Auch IE6 zeigt zusätzliche 198px an der Spitze von div # bottom an.

21
mattt

Stimmen Sie dem Validator-Kommentar zu - die Validierung hilft normalerweise. Aber wenn es nicht ein paar Hinweise für z-index im IE gibt:

1) Elemente, deren Z-Index Sie bearbeiten, sollten sich auf derselben Ebene befinden. Sie sollten den Z-Index für #Bottom und #Body festlegen

wenn dies nicht möglich ist, dann

2) IE wendet den z-Index manchmal nicht korrekt an, es sei denn, die Elemente, die Sie anwenden, haben einen position:relative. Wenden Sie diese Eigenschaft auf #bottom und #body (oder #signpost) an.

lass mich wissen, wie das klappt

Darko

20
Darko Z

Die meisten Antworten hier sind falsch. einige arbeiten, aber nicht aus dem Grund, den sie angeben. Hier ist eine Erklärung.

So sollte z-index nach der Spezifikation funktionieren:

  • sie können jedem Element einen z-index-Wert zuweisen. Wenn Sie dies nicht tun, wird standardmäßig auto verwendet.
  • positionierte Elemente (d. h. Elemente mit einem position-Attribut, das sich vom Standard static unterscheidet) mit einem z-index, der sich von auto unterscheidet, erstellen einen neuen stacking context. Stapelkontexte sind die "Einheiten" der Überlappung; Ein Stapelkontext liegt entweder vollständig über dem anderen (d. h. jedes Element des ersten liegt über einem Element des zweiten) oder vollständig darunter.
  • innerhalb desselben Stapelkontexts wird die stack-Ebene der Elemente verglichen. Elemente mit einem expliziten z-index-Wert haben diesen Wert als Stapelebene, andere Elemente erben von ihren übergeordneten Elementen. Das Element mit der höheren Stapelebene wird oben angezeigt. Wenn zwei Elemente dieselbe Stapelebene haben, wird im Allgemeinen das Element, das sich später in der DOM-Baumstruktur befindet, oben gezeichnet. (Kompliziertere Regeln gelten, wenn sie ein anderes position-Attribut haben.)

Mit anderen Worten: Wenn für zwei Elemente z-index festgelegt ist, müssen Sie prüfen, ob sie übergeordnete Elemente haben, für die ebenfalls z-index festgelegt ist. Wenn dies nicht der Fall ist oder die Eltern üblich sind, gewinnt derjenige mit dem höheren Z-Index. Wenn dies der Fall ist, müssen Sie die Eltern vergleichen, und der z-index der Kinder ist irrelevant.

Der z-index entscheidet also, wie das Element im Vergleich zu anderen untergeordneten Elementen seines "übergeordneten Stapels" (der nächste Vorfahr mit einem z-index-Satz und einer position von relative, absolute oder fixed) platziert wird. es ist der z-index des Stacking-Parents (oder möglicherweise der z-index des Stacking-Elternteils des Stacking-Elternteils usw.), der zählt. In einem typischen Dokument, in dem Sie z-index nur für einige Elemente wie Dropdown-Menüs und Popups verwenden, von denen keines das andere enthält, ist das übergeordnete Element aller Elemente, die einen z-index enthalten, das gesamte Dokument, und Sie können normalerweise zum Nachdenken anregen von z-index als globale Reihenfolge auf Dokumentebene.

Der grundlegende Unterschied zu IE6/7 besteht darin, dass positionierte Elemente neue Stapelkontexte starten, unabhängig davon, ob sie z-index gesetzt haben oder nicht. Da die Elemente, denen Sie z-index-Werte instinktiv zuweisen würden, in der Regel absolut positioniert sind und einen relativ positionierten übergeordneten oder nahen Vorfahren haben, bedeutet dies, dass Ihre z-index- Elemente nicht verglichen werden, sondern ihre positionierten Vorfahren - und seit Für diese ist kein Z-Index festgelegt.

Um dieses Problem zu umgehen, müssen Sie herausfinden, welche Vorfahren tatsächlich verglichen werden, und ihnen einen Z-Index zuweisen, um die gewünschte Reihenfolge wiederherzustellen (normalerweise in umgekehrter Reihenfolge). Normalerweise geschieht dies mit Javascript - für ein Dropdown-Menü können Sie durch die Menü-Container oder übergeordneten Menüelemente blättern und ihnen einen z-index von 1000, 999, 998 usw. zuweisen. Eine andere Methode: Wenn ein Popup- oder Dropdown-Menü sichtbar wird, suchen Sie alle relativ positionierten Vorfahren und geben Sie ihnen eine on-top-Klasse mit einem sehr hohen z-Index. Wenn es wieder unsichtbar wird, entfernen Sie die Klassen.

152
Tgr

Ich hatte gerade dieses Problem und die Lösung, die ich gefunden habe (danke Quirksmode), bestand darin, dem direkten Elternteil des Knotens, den Sie versuchen, einen Z-Index des eigenen Z-Index festzulegen, der unter dem Z-Index des liegt Knoten, den Sie einstellen möchten. Hier ist ein kurzes Beispiel, das in IE6 funktionieren sollte

<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>
4
Jason Sperske

Willkommen, ich habe das Problem gelöst mit: 

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

Sieht für mich so aus, als hätten Sie dort etwas falsches HTML. Ich habe versucht zu zählen, und vielleicht habe ich die Zählung der öffnenden und schließenden Tags verloren, aber es sieht so aus, als ob der div # -Behälter nicht geschlossen ist. Versuchen Sie, Ihre Seite durch einen Validierer (z. B. den HTML-Validator von W3C oder ähnliches) zu leiten und einige der Fehler zu beheben. Das hat mir bei solchen Problemen in der Vergangenheit geholfen. Viel Glück!

0
Shalom Craimer

die einzige zuverlässige Lösung ist, die obersten Elemente unten im Code und dann nach oben schieben das andere Element mit absoluter Positionierung zu setzen.

z.B. Wordpress: Fügt die Navigation in die Fußzeilendatei ein, aber immer noch im Seitenumbruch.

könnte auch einige Vorteile für Suchmaschinen mit sich bringen, da sie direkt mit dem Inhalt beginnen können, ohne zuerst durch das Menü zu scrollen ...

UPDATE: Ich muss mich korrigieren. Obwohl das Element unten platziert und dann nach oben geschoben wird, ist dies immer noch der einfachste Weg. In bestimmten Fällen ist dies nicht in angemessener Zeit möglich. Dann Sie müssen sicherstellen, dass jedes übergeordnete Element über eine Position und einen sinnvollen Z-Index verfügt. Dann sollte der Z-Index auch im IE7 wieder funktionieren.

0
Waschbär

Ich hatte kürzlich ein Problem mit der Darstellung einer Ebene über einer anderen. In meinem Fall erstellte ich programmgesteuert zwei Ebenen in Javascript, eine zum Anzeigen eines benutzerdefinierten Steuerelements und eine zum Erstellen einer vollständigen Bildschirmebene dahinter. FF war in Ordnung, bu IE zeigte die gesamte Bildschirmebene immer über allem anderen an.

Nach zahlreichen Schleppnetzen über das Interweb, bei denen alle Vorschläge ausprobiert wurden, war die einzige Möglichkeit, die Funktion zu nutzen, darin, position:-Attribute aus beiden Ebenen zu entfernen und das margin-top:-Attribut zu optimieren, bis ein zufriedenstellendes Ergebnis erzielt wurde.

Ein bisschen ein Hash, aber es funktioniert und es wird gut, bis IE 8 alle aktuellen Fehler aussortiert ...

0
Paul Gordon