Positionnement relatif

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 56 sur 76.

En CSS, le positionnement relatif est une méthode de positionnement qui permet de positionner un élément par rapport à sa position normale dans le flux du document. Lorsqu’un élément est défini avec 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 mode de positionnement de l’élément sur relative.
top, right, bottom, left : Ces propriétés indiquent le décalage de l’élément par rapport à sa position normale. Tu peux utiliser des valeurs positives ou négatives, exprimées en pixels (px), en em (em), en pourcentages (%) ou dans d’autres unités CSS valides.

Par exemple :

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

Dans cet exemple, l’élément doté de la classe box sera positionné 20 pixels plus bas et 30 pixels à 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

Vous disposez d’un document HTML contenant 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.

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>