Positionnement relatif

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

En CSS, le positionnement relatif est un schéma de positionnement qui vous permet de positionner un élément par rapport à sa position normale dans le flux du document. Lorsqu'un élément est défini sur position: relative;, il reste dans le flux normal, mais vous pouvez ensuite utiliser les propriétés top, right, bottom et left pour le décaler par rapport à sa position d'origine.

Voici la syntaxe de base pour utiliser le positionnement relatif :

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative; : Cette déclaration définit le schéma de positionnement de l'élément comme relatif.
top, right, bottom, left : Ces propriétés spécifient le décalage de l'élément par rapport à sa position normale. Vous pouvez utiliser des valeurs positives ou négatives, spécifiées en pixels (px), ems (em), pourcentages (%), ou d'autres unités CSS valides.

Par exemple :

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Dans cet exemple, l'élément avec la classe box sera positionné à 20 pixels vers le bas et 30 pixels vers la droite de sa position normale dans le flux du document. L'espace qu'il occupait initialement sera préservé, et les autres éléments ne viendront pas occuper cet espace.

Défi

Facile

On vous donne un document HTML avec une division (<div>) qui contient trois divisions enfants (<div>) avec les classes box1, box2, et box3. Votre tâche consiste à utiliser le positionnement relatif pour déplacer l'élément box2. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe box2.
Définissez la propriété position de l'élément .box2 sur relative.
Définissez la propriété top de l'élément .box2 sur 20px et la propriété left sur 40px. Cela déplacera la boîte de 20 pixels vers le bas et de 40 pixels vers la droite par rapport à sa position normale.

Aide-mémoire

Le positionnement relatif vous permet de positionner un élément par rapport à sa position normale dans le flux du document en utilisant position: relative; :

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

L'élément reste dans le flux normal, mais vous pouvez le décaler en utilisant les propriétés top, right, bottom et left. L'espace d'origine est préservé.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Cela déplace l'élément de 20px vers le bas et de 30px vers la droite par rapport à sa position normale.

Essayez vous-même

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>