Les bases du Z-Index

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 59 sur 76.

En CSS, la propriété z-index contrôle l'ordre d'empilement des éléments positionnés (éléments avec une position autre que static). Lorsque des éléments se chevauchent, le z-index détermine quel élément apparaît au-dessus et lequel apparaît derrière. Les éléments avec une valeur de z-index plus élevée sont empilés devant les éléments ayant une valeur inférieure.

Voici la syntaxe de base pour utiliser la propriété z-index :

selector {
    position: relative; /* ou absolute, fixed, ou sticky */
    z-index: value;
}

position: relative; (ou absolute, fixed ou sticky) : l'élément doit être positionné pour que z-index ait un effet.

value : Une valeur entière qui représente l'ordre d'empilement. Les éléments ayant des valeurs plus élevées sont empilés devant les éléments ayant des valeurs plus faibles. La valeur peut être positive, négative ou nulle.

Par exemple :

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Dans cet exemple, .box1 et .box2 sont tous deux positionnés de manière absolue. Comme .box1 possède une valeur z-index plus élevée, il sera empilé devant .box2 lorsqu'ils se chevauchent.

Défi

Facile

On vous donne un document HTML avec trois divisions (<div>) qui se chevauchent avec les classes box1, box2 et box3. Votre tâche consiste à utiliser la propriété z-index pour contrôler l'ordre d'empilement de ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe box1. Définissez sa propriété position sur absolute, top sur 0, left sur 0 et z-index sur 3.
Écrivez une règle CSS qui cible l'élément <div> avec la classe box2. Définissez sa propriété position sur absolute, top sur 20px, left sur 20px et z-index sur 2.
Écrivez une règle CSS qui cible l'élément <div> avec la classe box3. Définissez sa propriété position sur absolute, top sur 40px, left sur 40px et z-index sur 1.

Observez comment les valeurs de z-index affectent l'ordre d'empilement des boîtes, avec box1 en haut et box3 en bas.

Aide-mémoire

La propriété z-index contrôle l'ordre d'empilement des éléments positionnés. Les éléments ayant des valeurs de z-index plus élevées apparaissent devant les éléments ayant des valeurs plus faibles.

Syntaxe de base :

selector {
    position: relative; /* ou absolute, fixed, ou sticky */
    z-index: value;
}

Conditions requises :

L'élément doit avoir une position autre que static
La valeur peut être positive, négative ou nulle
Les valeurs plus élevées s'empilent devant les valeurs plus faibles

Exemple :

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Essayez vous-même

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>