Probleme mit der IE7-Z-Index-Schichtung

163

Ich habe einen kleinen Testfall des IE7- z-indexFehlers isoliert , weiß aber nicht, wie ich ihn beheben soll. Ich habe den z-indexganzen Tag mit gespielt.

Was ist los mit z-indexIE7?

CSS testen:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

HTML testen:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

css internet-explorer-7 z-index rezna
quelle

Wenn Sie nach einer Lösung

anordnen,

268

Der Z-Index ist keine absolute Messung. Es ist möglich, dass sich ein Element mit dem Z-Index: 1000 hinter einem Element mit dem Z-Index: 1 befindet - solange die jeweiligen Elemente zu verschiedenen Stapelkontexten gehören .

Wenn Sie den Z-Index angeben, geben Sie ihn relativ zu anderen Elementen im selben Stapelkontext an. Obwohl der Absatz der CSS-Spezifikation zum Z-Index besagt, dass ein neuer Stapelkontext nur für positionierte Inhalte mit einem anderen Z-Index als erstellt wird auto (dh Ihr gesamtes Dokument sollte ein einzelner Stapelkontext sein), Sie haben eine positionierte Spanne erstellt: Leider interpretiert IE7 positionierte Inhalte ohne Z-Index als neuen Stapelkontext.

Kurz gesagt, fügen Sie dieses CSS hinzu:

#envelope-1 {position:relative; z-index:1;}

oder gestalten Sie das Dokument so neu, dass Ihre Bereiche keine Position mehr haben: relativ:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Ein ähnliches Beispiel für diesen Fehler finden Sie unter http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ . Der Grund, warum ein übergeordnetes Element (Umschlag-1 in Ihrem Beispiel) einen höheren Z-Index erhält, liegt darin, dass dann alle untergeordneten Elemente von Umschlag-1 (einschließlich des Menüs) alle Geschwister von Umschlag-1 (insbesondere Umschlag-2) überlappen.

Obwohl Sie mit dem Z-Index explizit definieren können, wie sich Dinge überschneiden, ist die Überlagerungsreihenfolge auch ohne Z-Index gut definiert . Schließlich hat IE6 einen zusätzlichen Fehler, der dazu führt, dass Auswahlfelder und Iframes über alles andere schweben.

Eamon Nerbonne
quelle

4

endlich gelöst :) - die relative Position ist wirklich ärgerlich, also habe ich Ihre Idee irgendwie ohne die 'Umschlag'-Elemente übernommen - es scheint das Problem zu lösen und auch zu funktionieren - ich muss nur den Code für die Vorschlagsbox ein wenig neu gestalten - danke a lot

rezna

6

Es gibt drei verschiedene Faktoren, die sich darauf auswirken, wie sich Elemente überlappen: Stapelkontexte, Quellreihenfolge und Malreihenfolge. Die offensichtlichsten Probleme treten beim Stapeln von Kontexten auf. Wenn Sie die beiden anderen kennen, können Sie die esoterischeren Fallstricke herausfinden. Quelle: CSS-Discuss Wiki.

rjb

2

Das Hinzufügen des Z-Index zum übergeordneten Element ist eine wunderbare Lösung

Danyun Liu

2

Ich liebe dich. Position: relativ und Z-Index: 500 zu meinem Elternteil hinzugefügt und es wurde behoben!

Aymeric Gaurat-Apelli

2

Ich habe dieses Problem mit Kommentaren, die die Lösung demonstrieren, durcheinander gebracht. jsfiddle.net/fNcGu/3

Christopher Johnson

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

Nixis
quelle

Nachdem ich die "richtige" Lösung oben gelesen hatte, versuchte ich, eine Lösung für mein wesentlich komplexeres Problem als das triviale in der Frage zu formulieren. dann warf ich diese Antwort ein und es funktionierte wie ein Zauber. Wenn die obige Lösung die richtige ist, ist dies sicherlich die einfache. Vielen Dank!

Landon

11

In IE positionierte Elemente generieren einen neuen Stapelkontext, beginnend mit einem Z-Index-Wert von 0. Daher funktioniert der Z-Index nicht richtig.

Versuchen Sie, dem übergeordneten Element einen höheren Z-Index-Wert zu geben (der sogar höher sein kann als der Z-Index-Wert des Kindes selbst), um den Fehler zu beheben.

ed1nh0
quelle

1

Vielen Dank. Diese Lösung hat bei mir funktioniert, indem ein Z-Index des übergeordneten Containers angegeben wurde, der nicht unbedingt höher als der Z-Index des Kindes ist.

Neelmeg

4

Ich bin auf dieses Problem gestoßen, aber bei einem großen Projekt, bei dem HTML-Änderungen angefordert werden mussten und zu einem ganzen Problem wurden, suchte ich nach einer reinen CSS-Lösung.

Durch Platzieren position:relative; z-index:-1auf meinem Hauptkörperinhalt wurde mein Header-Dropdown-Inhalt plötzlich über dem Körperinhalt in IE7 angezeigt (er wurde bereits in allen anderen Browsern und in IE8 + ohne Probleme angezeigt).

Das Problem dabei war dann, dass alle Hover- und Klickaktionen für alle Inhalte im Element mit deaktiviert wurden. Also z-index:-1ging ich zum übergeordneten Element der gesamten Seite und gab ihm eineposition:relative; z-index:1

Dadurch wurde das Problem behoben und die korrekte Layering-Funktionalität beibehalten.

Fühlt sich ein bisschen hackig an, hat aber nach Bedarf funktioniert.

lukeroxout
quelle

3

Ich stellte fest, dass ich div in einem ie7-spezifischen Styelsheet eine spezielle Z-Index-Bezeichnung hinzufügen musste:

div {z-Index: 10; }}

Damit der Z-Index von nicht verwandten Divs, z. B. einem Navi, über dem Schieberegler angezeigt wird. Ich konnte dem Slider-Div selbst nicht einfach einen Z-Index hinzufügen.

eBar-Lösungen
quelle

Ich fand, dass dies zusätzlich dazu html {z-index:1; position:relative;}erlaubte , dass das Menü über das Karussellbild im IE ging.

Bassplayer7

2

Wenn die zuvor erwähnte höhere Z-Indizierung in übergeordneten Knoten nicht Ihren Anforderungen entspricht, können Sie eine alternative Lösung erstellen und diese entweder durch IE-bedingte Kommentare oder mithilfe der (idealistischeren) Funktionserkennung von Modernizr auf problematische Browser ausrichten.

Schneller (und offensichtlich funktionierender) Test für Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

Sphäroid
quelle

Sehr schön! Feature-Erkennung ist definitiv der richtige Weg.

Jason

1

Es sieht so aus, als wäre es kein Fehler, nur um den CSS-Standard anders zu verstehen. Wenn für den äußeren Container kein Z-Index angegeben ist, hat das innere Element einen höheren Z-Index angegeben. Das Geschwister des Containers überlagert also möglicherweise das Element mit dem hohen Z-Index. Auch wenn dies so ist, tritt es nur in IE7 auf, aber IE6, IE8 und Firefox sind in Ordnung.

c2j
quelle

0

In IE6 werden im Allgemeinen bestimmte UI-Elemente mit nativen Steuerelementen implementiert. Diese Steuerelemente werden in einer vollständig separaten Phase (Fenster?) Gerendert und erscheinen unabhängig vom Z-Index immer über allen anderen Steuerelementen. Auswahlfelder sind eine weitere solche problematische Steuerung.

Die einzige Möglichkeit, dieses Problem zu umgehen, besteht darin, Inhalte zu erstellen, die der IE als separates "Fenster" darstellt. Sie können also ein Auswahlfeld über einem Textfeld oder, nützlicher, einem Iframe platzieren.

Kurz gesagt, Sie müssen "On-Hover" -ähnliche Dinge wie Menüs in einen Iframe einfügen, damit der IE diese über den integrierten UI-Steuerelementen platzieren kann.

Dies sollte in IE7 behoben worden sein (siehe http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ), aber vielleicht laufen Sie in einem Kompatibilitätsmodus?

Eamon Nerbonne
quelle

Ich kenne den IE6-Z-Index-Fehler - und dieser ist behoben - aber es gibt ein anderes Problem mit relativ / absolut positionierten Elementen / Eingaben in IE7 (das in IE8 behoben ist) - ich habe einige Lösungen gefunden (mit Z-Indeces spielen), aber keiner von ihnen hat gearbeitet - deshalb frage ich dort ... Trotzdem danke für die Antwort.

Rezna

0

Dieser Fehler scheint ein anderes Problem zu sein als der standardmäßige IE-Fehler im separaten Stapelkontext. Ich hatte ein ähnliches Problem mit mehreren gestapelten Eingaben (im Wesentlichen eine Tabelle mit einem Autocompleter in jeder Zeile). Die einzige Lösung, die ich fand, bestand darin, jeder Zelle einen abnehmenden Z-Index-Wert zu geben.

Jeremy Kauffman
quelle

0

Wenn Sie ein Dropdown-Menü erstellen möchten und ein Problem mit dem Z-Index haben, können Sie es lösen, indem Sie Z-Indizes mit demselben Wert erstellen (Z-Index: 999; zum Beispiel). Fügen Sie einfach den Z-Index in die übergeordneten und untergeordneten Divs und ein das wird das Problem lösen. Damit löse ich das Problem. Wenn ich verschiedene Z-Indizes setze, wird mein untergeordnetes Div sicher über meinem übergeordneten Div angezeigt, aber sobald ich meine Maus von der Menüregisterkarte zum Untermenü div (Dropdown-Liste) bewegen möchte, verschwindet es ... dann Ich setze Z-Indizes des gleichen Wertes und löse das Problem.

Marko
quelle

0

Ich habe es gelöst, indem ich die Entwicklertools für IE7 (eine Symbolleiste) verwendet und dem Container des Div einen negativen Z-Index hinzugefügt habe, der unter dem des anderen Div liegt.

Lucas
quelle

Probleme mit der IE7-Z-Index-Schichtung

Antworten: