Hoe kunnen we een element hoger maken dan een ander…

Er zijn verschillende manieren om een element boven een ander te plaatsen in de lay-out:

z-index: De meest gebruikelijke methode. Toegepast op gepositioneerde elementen (met position anders dan static). Een element met een hogere z-index komt boven een element met een lagere waarde in dezelfde stapelcontext.
```
/* Element-1 ligt onder Element-2 */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Volgorde in de DOM: Zonder expliciete positionering en z-index, ligt het later in de HTML-code geplaatste element visueel boven de eerdere.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Positioneringseigenschappen: Het gebruik van eigenschappen zoals position: absolute of position: fixed creëert automatisch een nieuwe stapelcontext voor het element en plaatst het boven de normale stroom van het document (tenzij anders aangegeven).
```
.element-absolute {
  position: absolute;
  /* Andere positioneringseigenschappen */
}
```
Flexbox/Grid (Order): In Flexbox- en Grid-layouts stelt de eigenschap order je in staat de visuele volgorde van de elementen binnen de container te wijzigen, hoewel het niet direct de stapelcontext beïnvloedt in de standaard z-index-begrip.
```
.container {
  display: flex;
}

/* Element-2 wordt visueel als eerste */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformaties (Transform): Het gebruik van de eigenschap transform creëert een nieuwe lokale stapelcontext, en het getransformeerde element kan boven andere verschijnen, zelfs zonder expliciete positionering en z-index.
```
.element-transformed {
  transform: translateZ(1px); /* of een andere transformatie */
}
```

De keuze van de methode hangt af van de context en het gewenste effect. In de meeste gevallen wordt z-index in combinatie met position gebruikt om de overlapping te regelen.

Hoe kunnen we een element hoger maken dan een ander in de lay-out?