Ordre d'Empilement

La propriété z-index détermine l'ordre d'empilement des éléments positionnés sur une page web. Elle s'applique uniquement aux éléments positionnés, qui ont une valeur de position absolute, fixed, relative ou sticky. Comme les éléments sont retirés du flux normal du document, pour déterminer lequel de ces éléments positionnés doit être affiché plus haut ou plus bas, nous spécifions z-index.

Plus la valeur de la propriété z-index est élevée, plus l'élément est affiché en avant-plan sur l'écran de l'utilisateur.

Passons à la pratique. Nous avons quatre éléments div avec la classe box, chacun stylisé comme un carré et numéroté pour représenter leur ordre dans le document html. Les carrés sont actuellement positionnés les uns sur les autres. La tâche consiste à ajuster la propriété z-index avec les valeurs correctes pour amener le carré 3 à l'avant et envoyer le carré 4 à l'arrière.

Remarque

Si nous définissons la même valeur pour la propriété z-index à différents éléments, le navigateur affichera les éléments dans l'ordre dans lequel ils apparaissent dans le fichier html.