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.

  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

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".