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.
- CSS: So funktioniert z-index auch mit dem Internet Explorer
- IE -Trouble
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...
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;
}
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;
}
