Les bases du positionnement

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

En CSS, le positionnement est un ensemble de propriétés qui vous permettent de contrôler la position des éléments sur une page web. Par défaut, les éléments sont positionnés selon le flux normal du document HTML. Cependant, avec le positionnement CSS, vous pouvez retirer des éléments du flux normal et les placer à des endroits spécifiques par rapport à leur élément conteneur ou au viewport (la zone visible de la fenêtre du navigateur).

Il existe plusieurs valeurs pour la propriété position, chacune ayant son propre comportement :

static : C'est la valeur par défaut. L'élément est positionné selon le flux normal du document. Les propriétés top, right, bottom et left n'ont aucun effet.

relative : l'élément est positionné par rapport à sa position normale. Définir les propriétés top, right, bottom et left déplacera l'élément de sa position normale, mais il occupe toujours de l'espace dans le flux normal.

absolute : L'élément est retiré du flux normal et positionné par rapport à son ancêtre positionné le plus proche (un ancêtre avec une position autre que static). Si aucun ancêtre positionné n'est trouvé, il est positionné par rapport au bloc de contenance initial (généralement le viewport).

fixed : L'élément est retiré du flux normal et positionné par rapport à la fenêtre d'affichage (viewport). Il reste fixe à sa place même lorsque la page défile.

Voici la syntaxe de base pour utiliser la propriété position :

selector {
    position: value;
}

value : Le comportement de positionnement souhaité (par ex., static, relative, absolute, fixed, sticky).

Défi

Facile

On vous donne un document HTML avec une division parente (<div>) qui contient une division enfant (<div>). Votre tâche consiste à utiliser la propriété position pour modifier le contexte de positionnement des éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe container. Définissez sa propriété position sur relative. Cela en fera un ancêtre positionné pour ses enfants.
Écrivez une règle CSS qui cible l'élément <div> avec la classe box. Définissez sa propriété position sur absolute. Cela le sortira du flux normal et vous permettra de le positionner par rapport à son ancêtre positionné le plus proche (le container).
Définissez la propriété top de l'élément .box sur 50px et la propriété left sur 100px. Cela positionnera la boîte à 50 pixels du haut et 100 pixels de la gauche de son ancêtre positionné (le container).

Aide-mémoire

La propriété position contrôle la manière dont les éléments sont positionnés sur une page web :

selector {
    position: value;
}

Valeurs de position :

static : Positionnement par défaut dans le flux normal du document
relative : Positionné par rapport à sa position normale, occupe toujours de l'espace dans le flux
absolute : Retiré du flux normal, positionné par rapport à l'ancêtre positionné le plus proche
fixed : Retiré du flux normal, positionné par rapport à la fenêtre d'affichage (viewport), reste fixe lors du défilement

Utilisez les propriétés top, right, bottom et left pour ajuster la position (sauf avec static).

Essayez vous-même

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>