Wie können wir ein Element in der Gestaltung höher…

Es gibt mehrere Möglichkeiten, ein Element in der Gestaltung über einem anderen anzuordnen:

z-index: Die gebräuchlichste Methode. Wird auf positionierte Elemente angewendet (mit position ungleich static). Ein Element mit einem höheren z-index wird über einem mit niedrigerem z-index im gleichen Stapelkontext angezeigt.
```
/* Element-1 wird unter Element-2 sein */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Reihenfolge im DOM: Ohne explizite Positionierung und z-index wird das später im HTML-Code platzierte Element visuell über den vorherigen liegen.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Positionierungseigenschaften: Die Verwendung von Eigenschaften wie position: absolute oder position: fixed schafft automatisch einen neuen Stapelkontext für das Element und hebt es über den normalen Dokumentenfluss (sofern nicht anders angegeben).
```
.element-absolute {
  position: absolute;
  /* Weitere Positionierungseigenschaften */
}
```
Flexbox/Grid (Order): In Flexbox- und Grid-Layouts ermöglicht die Eigenschaft order die visuelle Reihenfolge der Elemente im Container zu ändern, beeinflusst jedoch nicht direkt den Stapelkontext im Standardverständnis von z-index.
```
.container {
  display: flex;
}

/* Element-2 wird visuell an erster Stelle stehen */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformationen (Transform): Die Verwendung der Eigenschaft transform schafft einen neuen lokalen Stapelkontext, und das transformierte Element kann über anderen erscheinen, auch ohne explizite Positionierung und z-index.
```
.element-transformed {
  transform: translateZ(1px); /* oder eine andere Transformation */
}
```

Die Wahl der Methode hängt vom Kontext und dem gewünschten Effekt ab. In den meisten Fällen wird z-index in Kombination mit position verwendet, um die Überlagerung zu steuern.

Wie können wir ein Element in der Gestaltung höher machen als ein anderes?