Comment pouvons-nous faire qu'un élément soit plus…

Il existe plusieurs façons de faire qu’un élément soit au-dessus d’un autre dans la mise en page :

z-index : La méthode la plus courante. S’applique aux éléments positionnés (ayant position différent de static). Un élément avec une valeur plus élevée de z-index sera au-dessus de celui avec une valeur inférieure dans le même contexte d’empilement.
```
/* Élément-1 sera en dessous de l’Élément-2 */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Ordre dans le DOM : En l’absence de position explicite et de z-index, l’élément placé plus tard dans le code HTML sera visuellement au-dessus des précédents.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Propriétés de positionnement : L’utilisation de propriétés comme position: absolute ou position: fixed crée automatiquement un nouveau contexte d’empilement pour l’élément et le place au-dessus du flux normal du document (sauf indication contraire).
```
.element-absolute {
  position: absolute;
  /* Autres propriétés de positionnement */
}
```
Flexbox/Grid (Order) : Dans les layouts Flexbox et Grid, la propriété order permet de changer l’ordre visuel des éléments dans le conteneur, sans affecter directement le contexte d’empilement dans la compréhension standard de z-index.
```
.container {
  display: flex;
}

/* Élément-2 sera visuellement en premier */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformations (Transform) : L’utilisation de la propriété transform crée un nouveau contexte d’empilement local, et l’élément transformé peut apparaître au-dessus des autres, même sans positionnement explicite ni z-index.
```
.element-transformed {
  transform: translateZ(1px); /* ou toute autre transformation */
}
```

Le choix de la méthode dépend du contexte et de l’effet souhaité. Dans la plupart des cas, pour contrôler la superposition, on utilise z-index en combinaison avec position.

Comment pouvons-nous faire qu'un élément soit plus haut qu'un autre dans la mise en page?