Positionnement fixe

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

En CSS, le positionnement fixe maintient un élément au même endroit sur l'écran, peu importe le défilement. Lorsque vous définissez position: fixed;, l'élément est retiré du flux normal de la mise en page, de sorte que les autres éléments l'ignorent. Il reste fixé à la fenêtre du navigateur, ce qui le rend utile pour les en-têtes, les pieds de page ou les menus qui doivent toujours être visibles.

Voici la syntaxe de base pour utiliser le positionnement fixe :

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

position: fixed; : cette déclaration définit le schéma de positionnement de l'élément sur fixe (fixed).

top, right, bottom, left : ces propriétés spécifient la position de l'élément par rapport à la fenêtre d'affichage (viewport). 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 :

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Dans cet exemple, l'élément avec la classe header est fixé en haut de la fenêtre d'affichage avec position: fixed;, top: 0; et left: 0;.

Défi

Facile

On vous donne un document HTML avec un en-tête (<div>) et un paragraphe (<p>). Votre tâche consiste à utiliser le positionnement fixe pour que l'en-tête reste en haut de la fenêtre d'affichage même lorsque la page défile. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe header.
Définissez la propriété position de l'élément .header sur fixed.
Définissez la propriété top de l'élément .header sur 0 et la propriété left sur 0. Cela positionnera l'en-tête dans le coin supérieur gauche de la fenêtre d'affichage.
Définissez la propriété width de l'élément .header sur 100% pour qu'il s'étende sur toute la largeur de la fenêtre d'affichage.
Définissez la propriété background-color de l'élément .header sur #fcc726 (jaune doré) afin qu'il soit visible par rapport au contenu de la page.
Définissez la propriété text-align sur center, pour un meilleur rendu visuel.

Essayez vous-même

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>