Stil mit {stil}

Mar 2009

CSS z-index • Reihenfolge von übereinander liegenden Elementen ändern

Wenn absolut und fest positionierte Elemente aus dem Textfluss genommen und beliebig positioniert werden, können sie übereinander liegen und die jeweils unter ihnen liegenden Elemente überlagern, so dass sie nicht mehr sichtbar sind.

<div id="ad4" style="background: lavender; z-index: 10;"> 4 </div>
<div id="ad5" style="background: ivory; z-index: 9;"> 5 </div>
<div id="ad6" style="background: thistle; z-index: 8;"> 6 </div>

<div id="ad1" style="background: lavender"> 1 </div>
<div id="ad2" style="background: ivory"> 2 </div>
<div id="ad3" style="background: thistle"> 3 </div>

Per Voreinstellung liegen absolut und fest definierte Elemente in der Reihenfolge übereinander, in der sie im Quelltext des HTML-Dokuments stehen – das zuletzt aufgeführte Element liegt oben. Mit der CSS-Eigenschaft z-index kann die Reihenfolge geändert werden.

HTML-Elemente können also drei Dimensionen aufweisen. Die x- und y-Position wird auf dem Monitor angezeigt, die z-Position bestimmt, welches Element über anderen Elementen liegt – eine Eigenschaft, die sich mit Ebenen in Illustrationssprogrammen wie Macromedia Freehand oder Adobe Illustrator vergleichen läßt. Je größer der Wert der CSS-Eigenschaft z-index, desto weiter oben liegt das Element. Anders gesagt, liegen Elemente mit größeren Werten über solchen mit niedrigeren Werten.

z-index

IE4+ M1 N6 O5+ Sa1 CSS2 Erblich: Nein

z-index

legt die Stapelordnung für Elemente fest, die sich auf dem gleichen Raum überlappen können.

Werte

auto | number

auto (Voreinstellung) setzt den Wert der Stapelordnung auf den Wert des Elternelements.

number kann eine positive oder negative ganzzahlige Zahl sein.

zurück zum Seitenanfang