Der z-index (+ ein wenig Opacity)

Der z-index ist ein häufig genutzter CSS-Befehl, der entscheidet welches Element über einem anderen angezeigt werden kann.

Oft stellt sich die Frage, wie man es regeln kann, wenn sich mehrere Elemente überlagern, man aber selbst festlegen will, welches Element an oberster Stelle angelegt werden soll. Standardmäßig hat jedes Element den z-index 0, fügt man mehrere Elemente ein, lässt sie überlagern, wird jenes Element als oberstes angezeigt, dass im HTML-Dokument als letztes eingefügt wurde bzw. im laufenden HTML das unterste ist:

.rot {
   width:300px; 
   height: 300px; 
   background-color: red;
   }
.blau {
    width:300px; 
    height: 300px; 
    background-color: blue; 
    position: absolute; 
    top: 100px; 
    left: 100px;
    }
.schwarz {
    width:300px; 
    height: 300px; 
    background-color: black;  
    position: absolute; 
    top: 200px; 
    left: 200px;
    }

Dieses CSS definiert drei Quadrate in drei unterschiedlichen Farben, zwei davon sind durch die CSS-Anweisungen position und top, sowie left so angelegt, dass sie sich zum Teil überdecken. Der HTML-Code sieht einfach wie folgt aus:

    <div class="rot"></div>
    <div class="blau"></div>
    <div class="schwarz"></div>

Ausgegeben ergibt das ganze folgendes Ergebnis:

Wenn wir jetzt aber beispielsweise wollen, dass das blaue Quadrat auf diesem „Stapel“ ganz oben liegt, müssen wir ihm einen z-index höher als den der anderen geben. Dazu reicht schon 1.

.blau {
    width:300px; 
    height: 300px; 
    background-color: blue; 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 1;
    }

Das Ergebnis sieht wie gewünscht aus:

Der z-index kann mit der Eigenschaft einer ganzzahligen Zahl versehen werden, diese Zahl kann sowohl positiv als negativ sein. Ein z-index kann also auch mit -1 besetzt werden. Der Browser rendert die Ebenen dann in der durch den z-index vorgegebenen Reihenfolge.


Spielen wir noch ein bisschen mit unserem Code. Was müssten wir zum Beispiel tun, wenn die blaue Ebene zwar als oberste gerendert werden soll, wie aber wissen wollen, was unter ihr ist?

Dazu können wir das CSS-Element opacity verwenden. Vordefiniert hat jedes Element hier den Wert 1, man kann es sich auch als 100% denken. Annehmen kann es jeden Wert zwischen 0 und 1 in den Schritten 0.9, 0.8, 0.7 usw. Wollen wir also festlegen, dass die Deckkraft des blauen Kastens bei 50% (0.5) liegt, müssen wir den Code wie folgt ergänzen:

.blau {
    width:300px; 
    height: 300px; 
    background-color: blue; 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 1;
    opacity: 0.5
    }

Wir erhalten dann folgendes Ergebnis:

About Thomas Matterne

Thomas Matterne ist ausgebildeter Journalist mit einem Diplom in Wirtschaftsinformatik. Er arbeitete als Leiter der Online Redaktion von TV touring und als Chefredakteur von DenkZeit. Aktuell schreibt er neben dieser Seite in diversen anderen Online-Veröffentlichungen, wie z.B. das Kaffee Journal. Auf dieser Seite finden sich vor allem Themen aus den Bereichen Content- und Online-Marketing, sowie dem Feld IT allgemein.

Schreibe einen Kommentar

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