CSS-Bug in Internet Explorer umschiffen

CSS: So funktioniert z-index auch mit dem Internet Explorer

Die CSS-Eigenschaft z-index soll die Reihenfolge steuern, mit der Elemente bei Überlappungen dargestellt werden. Doch mit dem IE gibt es oft Probleme.

Inhalt
  1. CSS: So funktioniert z-index auch mit dem Internet Explorer
  2. IE -Trouble

© Dr. Florence Maurice, Daniela Schrank

Vielleicht ist Ihnen das auch schon passiert: Das Drop-down-Menü präsentiert sich bestens im Firefox und Co., aber mit der Darstellung im Internet Explorer 6/7 hapert es. Das ausgeklappte Untermenü bleibt hartnäckig unterhalb des übrigen Inhalts, und ist nicht zu sehen. Selbst eine Angabe wie z-index: 1000 bewirkt nichts.Um das Problem zu verstehen und beheben zu können, sehen wir uns zuerst an, wie Elemente ohne z-index dargestellt werden: Ohne Formatierungen werden die Elemente einer Webseite untereinander dargestellt und es gibt keine Überlappungen. Allerdings können Überlappungen auftauchen, wenn Sie Elemente über position anordnen oder über einen negativen Margin verschieben. Gehen wir von zwei Elementen aus

<div id="eins">#eins</div><div id="zwei">#zwei</div>

und von dem CSS-Code, bei dem wir hier nur die wesentlichen Bestandteile zeigen:

#zwei {
margin-top: -40px;
margin-left: 40px;
}

© Dr. Florence Maurice, Daniela Schrank

Ohne z-index und position wird das im Quellcode später stehende Element oberhalb dargestellt.

Jetzt kommt es zu einer Überlappung durch den negativen Wert für margin-top: #zwei wird um 40px nach oben gezogen und überdeckt teilweise #eins. Dass #zwei das Element #eins überdeckt und nicht umgekehrt, liegt daran, dass #zwei im Quellcode später steht. Die Zeichnungsreihenfolge können Sie ändern, wenn Sie das erste Element positionieren, beispielsweise durch die Ergänzung von position: relative, bei #zwei gibt es hingegen keine Änderungen:

#eins {
position: relative;
}

Jetzt überdeckt #eins teilweise #zwei. Der Grund dafür ist, dass positionierte Elemente aus dem Dokumentfluss herausgenommen sind und damit oberhalb von nicht-positionierten Elementen angeordnet werden.Weist man hingegen beiden Elementen ein position: relative zu, so ist wiederum #zwei oberhalb von #eins gezeichnet, da es im Quellcode später steht. Und hier kommt z-index ins Spiel.

Vorhang auf für z-index

Z-index können Sie nur bei positionierten Elementen einsetzen. Das sind Elemente, denen Sie die Eigenschaft position mit einem Wert wie relative, absolute oder fixed zugewiesen haben.Die Anordnung von Elementen können Sie sich vorstellen wie übereinander angeordnete transparente Folien. Mit z-index lässt sich nun bestimmen, welche Folien (Elemente) weiter oben im Stapel und dadurch näher am Betrachter sind, und welche weiter unten sein sollen.Folgender Code führt also dazu, dass #eins oberhalb von #zwei gezeichnet wird.

#eins {
position: relative;
z-index: 2;
}
#zwei {
position: relative;
z-index: 1;
}

Z-index sorgt jedoch nicht nur für die Darstellung der Elemente in einer bestimmten Reihenfolge, sondern erzeugt gleichzeitig einen neuen Stapelkontext. Ein neuer Stapelkontext wirkt sich auf die Nachfahren eines Elements aus. Denn mit z-index lassen sich nur Elemente eines Stapelkontextes zueinander anordnen.Um die Auswirkung eines neuen Stapelkontextes zu zeigen, erweitern wir unser Beispiel durch ein Element #einsa, das innerhalb des Elements mit id="eins" platziert wird, also ein Kindelement von #eins ist.

<div id="eins">#eins<div id="einsa">#einsa</div></div><div id="zwei">#zwei</div>

Jetzt werden alle drei Elemente relativ positioniert und erhalten einen z-index:

#eins {
position: relative;
z-index: 1;
}
#zwei {
margin-top: -80px;
margin-left: 40px;
position: relative;
z-index: 2;
}
#einsa {
position: relative;
z-index: 3;
}

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.