Bases du positionnement

Fait partie de la section Style avec 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 sortir les éléments du flux normal et les placer à des emplacements précis par rapport à leur élément conteneur ou à la fenêtre d’affichage (la zone visible de la fenêtre du navigateur).

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

static : Il s’agit de 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. La définition des propriétés top, right, bottom et left éloignera 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 dont la valeur de position est différente de static). Si aucun ancêtre positionné n’est trouvé, il est positionné par rapport au bloc conteneur initial (généralement la fenêtre d’affichage).

fixed : L’élément est retiré du flux normal et positionné par rapport à la fenêtre d’affichage. Il reste fixe 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 exemple, static, relative, absolute, fixed, sticky).

Défi

Facile

On vous donne un document HTML contenant 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 retirera du flux normal et vous permettra de le positionner par rapport à son ancêtre positionné le plus proche (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é (container).

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>