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.

Aide-mémoire

Le positionnement fixe maintient un élément au même endroit sur l'écran, quel que soit le défilement. L'élément est retiré du flux normal de la mise en page.

Syntaxe de base :

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

Exemple - fixer un élément en haut à gauche de la fenêtre d'affichage (viewport) :

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

Les propriétés de position (top, right, bottom, left) spécifient la position de l'élément par rapport à la fenêtre d'affichage et acceptent des valeurs en pixels, ems, pourcentages ou autres unités CSS.

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>