CSS-Eigenschaft: z-index, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)
Überlagerungsreihenfolge der HTML-Elemente
Mit z-index: [Wert] und position: relative|absolute|fixed wird die Reihenfolge der HTML-Elemente in Bezug auf die "Draufsicht" (die Z-Achse) sortiert.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Überlagerungsreihenfolge der HTML-Elemente |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1):
Folgendes ist beim Einsatz von z-index zu beachten:
- Über den z-index können die Elemente in Ihrer Darstellungsreihenfolge in Bezug auf die "Draufsicht" verändert werden. Gültige Werte sind ganze, positive Zahlen, die höchste Zahl bringt dabei das betreffende HTML ganz nach vorne. 0 oder negative Zahlen sind nicht erlaubt und ohne Effekt.
- Ist keine Positionierung nach links, rechts, oben oder unten beabsichtigt, empfiehlt es sich, die position auf relative zu setzen, da damit das HTML-Element an seiner natürlichen Position im Elementfluss bleibt. Die Kombination mit absolute oder fixed ist aber grundsätzlich auch möglich.
- Ein z-index: 2 führt dazu, dass das HTML-Element vor dem mit dem z-index: 1 liegt. Bei der Wahl der Werte empfiehlt es sich, die z-index-Angaben nicht lückenlos, also nicht 1, 2, 3, 4, 5 usw. zu vergeben, sondern in Zehner-, besser in Hunderterschritten zu vergeben, also 100, 200, 300 usw. Damit kann man nachträglich weitere z-index-Einstellungen vornehmen, ohne später alle anderen Angaben überprüfen und anpassen zu müssen. Da die Positionierung per z-index die natürliche Ordnung der Seite durcheinander bringt, sind erfahrungsgemäß (wenn einmal eine Positionierung per z-index verwendet wurde) nicht selten weitere z-index-Angaben notwendig.
- Alleine eingesetzt hat die Eigenschaft z-index keine Auswirkung. Sie wirkt erst dann, wenn die Eigenschaft position den Wert relative, absolute oder fixed hat. Die Angabe einer position ist folglich Pflichtangabe im Zusammenhang mit z-index.
- Die Angabe position: static ist die Standardeinstellung der Browser, auch wenn dieser Wert als position explizit gesetzt ist, greift z-index nicht.
- Wenn keine position und kein z-index gesetzt ist, werden alle HTML-Elemente in ihrem "natürlichem Elementfluss" dargestellt. Das heißt, Inline-Elemente werden TAG für TAG nebeneinander ausgespielt, wenn eine Zeile voll ist, rutscht der nächste TAG in die nächste Zeile. Block-Elemente werden Zeile für Zeile ausgespielt.
- Wären sämtliche Elemente absolut positioniert, ohne Angabe von top, left, right oder bottom und auch ohne z-index, würden alle Elemente links oben im Browserfenster sitzen. Ohne Angabe von z-index sortieren sich die HTML-Elemente von hinten nach vorne auf dem Bildschirm. Das letze HTML-Element im Quelltext überlagert dann alle anderen Elemente. Sind Elemente mit z-index versehen, andere aber nicht (aber absolut positioniert), wären alle ohne z-index hinten, darauf folgen dann die Elemente mit gesetztem z-index.
- Ein Nebeneffekt von der z-index-Positionierung ist die Überlagerung von Links, Eingabefeldern und Buttons, also interaktiven HTML-Elementen. Auch wenn eine Ebene als solche nicht sichtbar ist, kann es passieren, dass man mit einer unsichtbaren Ebene INPUT-Felder überlagert und den Zugriff mit der Maus verhindert.
- Der Standard begrenzt den Wert für den z-index nach oben nicht, allerdings ist der Wert durch rechnerische Grenzen der Browser beschränkt. Für die meisten Browser gilt 2147483647 als der Maximalwert, für den Safari 3 ist ein Wert von 16777271 dokumentiert. Um eine Browserkompatibilität sollte der Wert also nicht überschritten werden. (Quelle: http://softwareas.com/whats-the-maximum-z-index).
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu z-index:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
wrap-through - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
zoom
Beispiele
HTML:
<div class="box">
<div class="doRed">red</div>
<div class="doBlue">blue</div>
<div class="doGreen">green</div>
<div class="doYellow">yellow</div>
</div>CSS:
div.box {
min-height: 200px;
border: 1px solid black;
position: relative;
}
div div {
margin: 5px;
min-height: 55px;
border: 5px solid silver;
}
.doRed {
background-color: red;
width: 150px;
height: 150px;
}
.doBlue {
background-color: blue;
width: 120px;
height: 120px;
}
.doGreen {
background-color: green;
width: 90px;
height: 90px;
}
.doYellow {
background-color: yellow;
width: 60px;
height: 60px;
}
/* Ausgangslage - ohne eine Positionierung werden die DIVs so angezeigt. */Beispiel Nr. 1 So sieht's aus:
red
blue
green
yellow
HTML:
<div class="box">
<div class="doRed abs">red</div>
<div class="doBlue abs">blue</div>
<div class="doGreen abs">green</div>
<div class="doYellow abs">yellow</div>
</div>CSS:
.abs {
position: absolute;
}
/* Alle Elemente sind hier absolut positioniert, jedoch ohne z-index. Das rote DIV (zuerst im Quelltext) liegt hinten, das gelbe (zuletzt im Quelltext) liegt oben */Beispiel Nr. 2 So sieht's aus:
red
blue
green
yellow
HTML:
<div class="box">
<div class="doRed abs">red</div>
<div class="doBlue abs doOnTop">blue</div>
<div class="doGreen abs">green</div>
<div class="doYellow abs">yellow</div>
</div>CSS:
.doOnTop {
z-index: 100;
left: 20px;
top: 20px;
}
/* Hier ist dem blauen DIV ein z-index zugewiesen. Es überlagert damit alle anderen Elemente.
Zur Verdeutlichung ist es noch um 20px verrückt, um das gelbe und grüne DIV nicht zu überlagern. */Beispiel Nr. 3 So sieht's aus:
red
blue
green
yellow
HTML:
<div class="box">
<div class="doRed abs">red</div>
<div class="doBlue abs doOnTop">blue</div>
<div class="doGreen abs">green</div>
<div class="doYellow abs doOverTop">yellow</div>
</div>CSS:
.doOverTop {
z-index: 200;
}
/* Mit einer weiteren Angabe, welche höher ist als der z-index des blauen DIVs, wird das gelbe DIV nun ganz nach vorne geholt. */Beispiel Nr. 4 So sieht's aus:
red
blue
green
yellow
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!