CSS-Bug in Internet Explorer umschiffen

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

26.2.2011 von Dr. Florence Maurice

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

ca. 2:15 Min
Ratgeber
VG Wort Pixel
  1. CSS: So funktioniert z-index auch mit dem Internet Explorer
  2. IE -Trouble
image.jpg
© 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;
}

image.jpg
Ohne z-index und position wird das im Quellcode später stehende Element oberhalb dargestellt.
© Dr. Florence Maurice, Daniela Schrank

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

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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