Skip to main content

CSS-Tipp: negativer z-index

Geschrieben von beate am . Veröffentlicht in Webdesign spezial.

Mit der CSS-Eigenchaft z-index wird im Webdesign die Reihenfolge festgelegt, in der sich überlappende Elemente eines html-Dokumentes dargestellt werden. Dabei überlappt das Element mit dem höheren z-index dasjenige Element mit dem niedrigeren z-index. z-index=3 wird also von z-index=5 überlagert oder verdeckt.

#container{
    z-index: -1;
}

Hier sind laut CSS-Doku auch negative Werte möglich, wobei dies von allen Browsern unterstützt werden soll (mehr Infos zum z-index z. B. im selfhtml-Wiki).

Meine Webdesign-Praxis hat allerdings ergeben, dass es hier mit einigen Browsern Probleme geben kann. In einem Beispiel war ein Bild in einem DIV-Container platziert, dem ein negativer z-index zugewiesen war. Hier funktionierte der Link des Bildes auf dem Safari-Browser nicht mehr, indem das Bild einfach nicht sensitiv für den Mauszeiger war. Nach Änderung des z-index auf einen positiven Wert funktionierte der Link dann wieder.

#container{
    z-index: 1;
}

Seither verwenden wir den negativen z-index nicht mehr.