Was ist z-index und wie wird es in der Webentwicklung verwendet?

z-index — ist eine CSS-Eigenschaft, die die Stapelreihenfolge (Stacking) der Elemente anhand ihrer Position auf der Z-Achse bestimmt. Elemente mit höheren z-index-Werten werden über Elementen mit niedrigeren Werten angezeigt.

Sie wird verwendet, um die Tiefe der Stapelung von Elementen mit Positionierung zu steuern (d.h., Elemente, bei denen die Eigenschaft position Werte ungleich static hat): relative, absolute, fixed, sticky.

Wichtige Nutzungspunkte:

• Elemente mit statischer Positionierung (position: static;) nehmen nicht am Stapelkontext teil und ignorieren z-index.
• Der z-index-Wert gilt nur für Elemente, die einen neuen Stapelkontext erzeugen. Dieser Kontext wird z.B. durch Verwendung von position mit Werten ungleich static oder durch andere CSS-Regeln (z.B. opacity < 1) geschaffen.
• Innerhalb eines Stapelkontexts werden Elemente mit höherem z-index oben angezeigt.
• Verschachtelte Stapelkontexte werden als eine Einheit innerhalb des übergeordneten Kontexts gestapelt.
• Ohne explizite Zuweisung von z-index wird die Stapelreihenfolge durch die Reihenfolge der Elemente im DOM bestimmt.

Beispiel:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Höher als .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Niedriger als .box1 */
}