z-index richtig nutzen

Im normal Fall, wird die HTML-Element Ebene durch deren Anordnung in der HTML-Datei bestimmt. Das kann man sich am besten Vorstellen, wie Folien die übereinander gelegt werden. Jedes neue Element (im HTML von oben nach unten geschrieben) entspricht einer neuen Folie, die man auf die bisher vorhanden Folien oben drauf legt.

Normalerweise spielt es keine Rolle welche Anordnung ein Element besitzt und kann gepflegt ignoriert werden, da die meisten Elemente untereinander im HTML auftauchen und nicht überlappend (1).

Normale Anordnung

1. Normale Anordnung

Normale Anordnung mit Positionierung

2. Normale Anordnung mit Positionierung

Positionierung mit z-index

3. Positionierung mit z-index

Wer mit positionierungen arbeitet, wird relativ schnell merken, dass ein Element welches immer im Vordergrund stehen muss z.B. bei einer Navigation, auf einmal hinter einem anderen Element verschwindet. Oft wird z.B. die Navigation als einer der ersten Elemente angelegt, daher liegt dieses Element sicherlich in der Anordnung ( oder wie im Beispiel Folien-Stapel ) sehr weit unten und unsere kürzlich hinzugefügten Elemente liegen über dieser. Dadurch wird unsere Navigation einfach überlappt (2). Um nun diese Positionierungs-Ebene zu beeinflussen, nutzt man den CSS-Befehl „z-index“.

Mit dem „z-index“ kann man einem Element eine Ebene mit Hilfe von CSS zuweisen und damit beeinflussen, welches Element welches überlappt. Es wird wie folgt genutzt:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webseit Titel</title>
  </head>
  <body>
    <div id="navigation"></div>
    <div id="content"></div>
  </body>
</html>
/* CSS */
#navigation {width: 140px; height: 140px; z-index:1;}
#content {width: 140px; height: 140px; z-index:1;}

Die Nummerierung bestimmt dabei die Anordnung. Je höher die Nummer, desto weiter oben wird dieses Element angeordnet (3).

Zu beachten ist allerdings, das der z-index nur in Verbindung mit einer positionierung funktioniert, wenn man also keine positionierung für das Element nutz, weil man z.B. mit einem negativen Außenabstand arbeitet um ein Element zu positionieren, muss man diesem zumindest ein „position:relative;“ im CSS zuweisen.

Über den Autor
Danny Schulz
Ich arbeite als Webdesigner / Frontend-Developer in einer Online-Marketing Agentur in Hamburg. Dort bin ich für die Umsetzung verschiedener Webprojekte verantwortlich, wodurch ich mir bereits einiges an Erfahrungen in vielen Bereichen der Webentwicklung aneignen konnte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert