nicht angemeldet
Hallo Andree,
habe ich das richtig verstanden, dass es also nicht einen gemeinsamen z-index für _alle_ Elemente gibt,
Ja.
sondern dieser - zumindest bei position:absolute - sich immer nur auf das nächsthöhere positionierte Element bezieht?
Ja, aber … :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>z-index</title>
</head><body>
<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
<b>A:2</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund">
</div>
<div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
<b>B:1</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund">
</div>
<div style="position:absolute; top:190px; left:270px; width:300px; height:280px; z-index:3;
border:1px solid #888; background:#eee;">
<b>C:3</var></b>
<div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
<b>D:2</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund">
</div>
<div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
<b>E:3</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund">
</div>
<div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
<b>F:-1</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund">
</div>
</div>
</body>
</html>
→ Beispiel plus Erläuterung aus SELFHTML 8.1.1:
Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.
Beachten Sie:
Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die voraussichtliche Spezifikation gemäß CSS2.1 umsetzen.
Siehe auch CSS2.1 z-index
Grüße
Roland
MudGuard