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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…