Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 2: Der z-index

Kürzlich traf ich auf ein interessantes Problem, dessen Lösung ich hier beschreiben möchte. Für einen Webauftritt entwarf ich aus Designgründen einen Bildwechsel mit darüber liegenden Schaltflächen.

Das Bild wird per Javascript alle acht Sekunden durch einen Fade-Effekte ausgetauscht, während die Schaltflächen im Bild beständig angezeigt werden sollen. Das funktionierte auch soweit wunderbar, aber nur, wenn Javascript eingeschaltet ist.

Nun gibt es aber immer noch viele Benutzer, die Javascript aus Sicherheits- oder sonstigen Gründen deaktiviert haben, in diesem Falle wird leider kein Bild angezeigt – und das konnte natürlich so nicht bleiben.

Gestatten: der z-index

Zur Lösung des Problems beschäftigte ich mich erstmals mit dem z-index in CSS. Je höher dieser Wert ist, umso höher ist die „Ebene“, vom Benutzer aus gesehen, auf der ein Bild oder Element platziert wird. Elemente mit höherem Wert überdecken also Elemente mit niedrigem Wert. Der niedrigste z-index ist -1, der Hintergrund.

Schematische Darstellung z-index

Also definierte ich ein Default-Hintergrundbild mit dem z-index -1 und änderte die Javascript-Routine dahingehend, dass es für die anzuzeigenden Bilder einen z-index zwischen 10 und 50 vergibt. Die Schaltflächen ganz oben erhielten mittels

.schaltflaeche { position:absolute; z-index:99; }

die oberste Position, da sie ja ständig sichtbar sein sollen. Eine kleine Falle haben die Schöpfer von CSS hier eingebaut, die position-Angabe muss „relative“, „absolute“* oder „fixed“ sein, da der z-index sonst nicht beachtet wird.

Bei meinen Tests im Internet Explorer, Firefox, Chrome und Opera** funktionierte die Anzeige nun tadellos. Ist Javascript ausgeschaltet, sieht der Besucher das Defaultbild, andernfalls den Bildwechsel, die Schaltflächen sind in jedem Falle vor einem Bild zu sehen.

_________________________________________________________
* Gern gemachter Fehler, auf den ich auch schon reingefallen bin: es heißt „absolute“, also Englisch mit ‚e‘ am Ende, nicht das Deutsche „absolut“.
** Früher habe ich die Darstellung auch im Safari-Browser getestet, seit Apple in seiner Selbstherrlichkeit diesen Browser für Windows nicht mehr unterstützt, musste ich dies leider einstellen.

Kommentare

Kommentare

Kommentar schreiben

Aufgrund neuer rechtlicher Bestimmungen habe ich die Kommentarfunktion meines Blogs vorübergehend deaktiviert und muss Sie vorerst bitten, Kommentare per Email an mail [at] manoftaste.de zu senden.