CSS Academy · Leçon

Positionnement fixe et collant

Fixez les éléments à la fenêtre d’affichage ou créez des en-têtes et des barres latérales collants lors du défilement.

Positionnement fixe et collant est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

position: fixed

Un élément fixe est positionné par rapport à la fenêtre d’affichage du navigateur et reste en place même lorsque la page défile. Il est également retiré du flux du document.

<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>

Cas d’utilisation du positionnement fixe

Utilisations courantes de position: fixed :

Barres de navigation qui restent en haut
Boutons d’action flottants (FAB)
Widgets de discussion en bas à droite
Bannières de consentement aux cookies
Superpositions modales

Compenser la présence d’en-têtes fixes

Les en-têtes fixes chevauchent le contenu situé en dessous. Ajoutez un espacement interne ou une marge supérieure égale à la hauteur de l’en-tête pour repousser le contenu vers le bas :

<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>

Parents transformés et positionnement fixe

Un comportement particulier est à connaître : si un élément parent possède une propriété CSS transform, perspective ou filter, le positionnement fixe devient relatif à ce parent, et non à la fenêtre d’affichage. C’est un bogue courant.

position: sticky

position: sticky est un mode hybride : l’élément défile normalement jusqu’à atteindre un seuil défini (par exemple top: 0), puis il reste fixe dans son conteneur parent.

<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>

Sticky nécessite un parent défilable

L’élément sticky reste fixe à l’intérieur de son bloc englobant. Si le parent n’est pas assez haut pour permettre le défilement, sticky n’a aucun effet. Le parent ne doit pas avoir défini overflow sur hidden.

Top, right, bottom et left pour sticky

Vous devez définir au moins un décalage pour activer sticky. Schémas courants :

<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>

En-têtes de tableau sticky

Sticky est idéal pour les en-têtes de tableaux dans des conteneurs de tableau défilables : l’en-tête reste visible lorsque l’utilisateur fait défiler les lignes.

<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>

Schéma de barre latérale sticky

Une barre latérale sticky classique qui reste visible pendant le défilement du contenu principal :

<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>

Résumé : fixed par rapport à sticky

Différences essentielles :

Fixed : toujours positionné par rapport à la fenêtre d’affichage, toujours hors du flux
Sticky : défile avec le contenu jusqu’au seuil, reste dans le flux et s’arrête à la limite du parent

Performances : fixed et calques

Les éléments fixes créent un nouveau contexte d’empilement et peuvent déclencher une mise en page lors du défilement s’ils chevauchent des zones à repeindre. Gardez les éléments fixes simples et évitez les propriétés coûteuses comme box-shadow.

Vérification rapide

Quelle contrainte position: sticky impose-t-il contrairement à position: fixed ?

Récapitulatif

position: fixed ancre les éléments à la fenêtre d’affichage pour créer une navigation adhérente et des superpositions. position: sticky défile normalement jusqu’à un seuil, puis reste fixe — ce qui est idéal pour les en-têtes de tableaux et les barres latérales. Les deux nécessitent au moins une propriété de décalage pour activer le comportement adhérent.

Questions Fréquemment Posées

La leçon « Positionnement fixe et collant » est-elle gratuite ?

Oui — le texte complet de « Positionnement fixe et collant » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Positionnement fixe et collant » ?

Fixez les éléments à la fenêtre d’affichage ou créez des en-têtes et des barres latérales collants lors du défilement. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Positionnement fixe et collant » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à CSS Academy