Positionnement absolu

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

En CSS, le positionnement absolu vous permet de placer un élément exactement là où vous le souhaitez à l'intérieur de son conteneur.

Lorsque vous définissez position: absolute;, l'élément est retiré du flux normal de la mise en page, de sorte que les autres éléments agissent comme s'il n'était pas là. Il se positionne par rapport à l'ancêtre le plus proche ayant une position définie (autre que static). S'il n'y en a pas, il se positionne par rapport à la page.

Voici la syntaxe de base pour utiliser le positionnement absolu :

.parent {
    position: relative; /* Faire du parent un ancêtre positionné */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent : Le sélecteur CSS qui cible l'élément parent. Définir position: relative; permet d'avoir des enfants positionnés de manière absolue.

.child: Le sélecteur CSS qui cible l'élément que vous souhaitez positionner de manière absolue.

position: absolute; : cette déclaration définit le schéma de positionnement de l'élément comme absolu, le retirant du flux normal du document.

top, right, bottom, left : ces propriétés spécifient la position de l'élément par rapport à son ancêtre positionné le plus proche. Vous pouvez utiliser des valeurs positives ou négatives, spécifiées en pixels (px), en ems (em), en pourcentages (%) ou d'autres unités CSS valides.

Par exemple :

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

Dans cet exemple, l'élément .parent est défini comme un ancêtre positionné avec position: relative;. L'élément .child est positionné de manière absolue avec position: absolute;, et sa position est fixée à 50 pixels du haut et 100 pixels de la gauche de son ancêtre positionné le plus proche (l'élément .parent).

Défi

Facile

On vous donne un document HTML avec une division parente (<div>) qui contient deux divisions enfants (<div>) avec les classes box1 et box2. Votre tâche consiste à utiliser le positionnement absolu pour positionner l'élément box2 à l'intérieur du parent. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe parent. Définissez sa propriété position sur relative pour en faire un ancêtre positionné.
É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 absolute.
Définissez la propriété top de l'élément .box2 sur 30px et la propriété right sur 20px. Cela positionnera la boîte à 30 pixels du haut et 20 pixels de la droite de son ancêtre positionné (le parent).

Aide-mémoire

Le positionnement absolu place un élément exactement là où vous le souhaitez à l'intérieur de son conteneur. L'élément est retiré du flux normal de la mise en page et se positionne par rapport à l'ancêtre positionné le plus proche.

Syntaxe de base :

.parent {
    position: relative; /* Faire du parent un ancêtre positionné */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Exemple :

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

position: absolute; retire l'élément du flux normal
Les propriétés top, right, bottom, left spécifient la position par rapport à l'ancêtre positionné le plus proche
Les valeurs peuvent être en pixels (px), ems (em), pourcentages (%) ou d'autres unités CSS
Si aucun ancêtre positionné n'existe, l'élément se positionne par rapport à la page

Essayez vous-même

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>