wake-up-neo.com

IE7 Z-Index Layering-Probleme

Ich habe einen kleinen Testfall des IE7-Fehlers z-index Isoliert, weiß aber nicht, wie ich ihn beheben soll. Ich habe den ganzen Tag mit z-index Gespielt.

Was ist los mit z-index In IE7?

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>
163
rezna

Der Z-Index ist kein absolutes Maß. Es ist möglich, dass ein Element mit dem Z-Index: 1000 hinter einem Element mit dem Z-Index: 1 steht - solange die entsprechenden Elemente dazu gehören verschiedene Stapelkontexte .

Wenn Sie den Z-Index angeben, geben Sie ihn relativ zu anderen Elementen im selben Stapelkontext an, und obwohl im Absatz der CSS-Spezifikation zum Z-Index angegeben ist, wird ein neuer Stapelkontext nur für positionierten Inhalt erstellt mit einem anderen Z-Index als auto (das heißt, Ihr gesamtes Dokument sollte ein einzelner Stapelkontext sein), Sie haben konstruieren einen positionierten Bereich: IE7 interpretiert leider positioniert Inhalt ohne Z-Index als neuer Stapelkontext.

Kurz gesagt, versuchen Sie, dieses CSS hinzuzufügen:

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

oder gestalten Sie das Dokument so um, dass Ihre Bereiche keine relative Position mehr haben:

<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 (Envelope-1 in Ihrem Beispiel) einen höheren Z-Index erhält, ist, dass dann alle untergeordneten Elemente von Envelope-1 (einschließlich des Menüs) alle Geschwister von Envelope-1 (insbesondere Envelope-2) überlappen.

Obwohl Sie mit dem Z-Index explizit definieren können, wie sich die Dinge überlappen, auch ohne Z-Index ist die Reihenfolge der Ebenen gut definiert . Schließlich hat IE6 einen zusätzlichen Fehler, der dazu führt, dass Selectboxes und Iframes über allem anderen schweben.

267
Eamon Nerbonne

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;
});
});
15
nixis

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 zuzuweisen (der sogar höher sein kann als der Z-Index-Wert des untergeordneten Elements selbst), um den Fehler zu beheben.

11
ed1nh0

Ich bin auf dieses Problem gestoßen, aber bei einem großen Projekt, bei dem HTML-Änderungen angefordert werden mussten, wurde es zu einem vollständigen Problem. Daher suchte ich nach einer reinen CSS-Lösung.

Durch Platzieren von position:relative; z-index:-1 Auf meinem Haupttextinhalt wurde mein Dropdown-Inhalt der Kopfzeile plötzlich in ie7 über dem Textinhalt angezeigt (er wurde bereits in allen anderen Browsern und in ie8 + ohne Probleme angezeigt).

Das Problem dabei war, dass dies alle Hover- und Click-Aktionen für den gesamten Inhalt des Elements mit dem z-index:-1 Deaktivierte, also ging ich zum übergeordneten Element der gesamten Seite und gab ihm einen position:relative; z-index:1.

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

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

4
lukeroxout

Ich fand heraus, dass ich eine spezielle Z-Index-Bezeichnung auf div in einem IE7-spezifischen Stilblatt platzieren musste:

div {Z-Index: 10; }

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

3
eBar Solutions

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 sie auf problematische Browser ausrichten, indem Sie entweder IE= Bedingte Kommentare oder die (idealistischere) Feature-Erkennung verwenden zur Verfügung gestellt von Modernizr.

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;
});
2
spheroid

Es sieht nicht nach einem IE-Fehler aus, nur um den CSS-Standard besser zu verstehen. Wenn der äußere Container nicht angegeben ist, hat der Z-Index, aber das innere Element einen höheren Z-Index angegeben. Der 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.

1
c2j

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

0
Lucas

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). Geben Sie einfach den Z-Index in die über- 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 über meinem übergeordneten Div angezeigt, aber wenn ich meine Maus vom Menü-Tab in das Untermenü Div (Dropdown-Liste) bewegen möchte, verschwindet es ... dann ich setze gleichwertige z-indizes und löse das problem ..

0
Marko

Im IE6 werden im Allgemeinen bestimmte UI-Elemente mit systemeigenen Steuerelementen implementiert. Diese Steuerelemente werden in einer völlig separaten Phase (Fenster?) Gerendert und erscheinen unabhängig vom Z-Index immer über allen anderen Steuerelementen. Select-Boxen sind eine weitere solche problematische Kontrolle.

Die einzige Möglichkeit, dieses Problem zu umgehen, besteht darin, Inhalte zu erstellen, die IE als separates "Fenster" dargestellt werden - d. H., Sie können ein Auswahlfeld über einem Textfeld oder sinnvollererweise über einem Iframe platzieren.

Kurz gesagt, Sie müssen "On-Hover" -Dinge wie z. B. Menüs in einen Iframe einfügen, damit IE) diese über den integrierten Steuerelementen der Benutzeroberfläche platziert werden.

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

0
Eamon Nerbonne

Dieser Fehler scheint ein anderes Problem zu sein als der normale separate Stapelkontext IE Fehler. 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-Indexwert zuzuweisen.

0
Jeremy Kauffman