Z-Index

Definition:
Der Z-Index ist eine CSS-Eigenschaft, die die Stapelreihenfolge von Elementen auf einer Webseite bestimmt. Er beeinflusst, welche Elemente über oder unter anderen Elementen angezeigt werden, wenn sie sich überlappen. Der Z-Index kann nur auf Elemente angewendet werden, die positioniert sind (z.B. mit position: absolute;, position: relative; oder position: fixed;). Ein höherer Z-Index-Wert bedeutet, dass ein Element näher am Betrachter liegt und somit über Elementen mit einem niedrigeren Z-Index-Wert angezeigt wird.

Beispiel:
Stellen Sie sich eine Webseite vor, auf der ein Menü und ein Textblock vorhanden sind. Ohne Z-Index könnten Teile des Menüs hinter dem Textblock verschwinden, wenn sie sich überlappen. Durch Festlegen eines höheren Z-Index-Wertes für das Menü (z.B. z-index: 10;) im Vergleich zum Textblock (z-index: 1;), wird sichergestellt, dass das Menü über dem Text erscheint, was besonders wichtig ist, wenn das Menü als Overlay oder Dropdown gestaltet ist.

29 Mar 2024