Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Positionnement : relative, absolute, fixed et sticky | SovranCode

Contenu du coursNormal Flow, Display, and Positioning · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS56 min

Normal Flow, Display, and Positioning

Use normal document flow first, then choose display and positioning intentionally.

Le flux normal permet aux blocs et au texte de suivre l’ordre de lecture du document et de s’adapter au contenu. display change leur contexte de mise en page. Le positionnement sert notamment à ajouter une superposition locale ; il ne doit pas remplacer la structure HTML ni l’organisation principale de la page.

Comprendre à quoi le badge est rattaché

Repérez l’ancêtre en position: relative, puis le badge en position: absolute et ses décalages. Avant de modifier le code, cherchez quelle boîte sert de référence au badge et quels éléments restent dans le flux normal.

.profile { display: flow-root; position: relative; }
.profile__badge {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
}
.profile__body {
  display: grid;
  gap: .75rem;
}

Les bons réflexes

Vérifiez que l’ordre de lecture reste cohérent sans CSS.
Utilisez les propriétés logiques de décalage et de marge pour suivre le sens d’écriture.
Appliquez position: relative au composant qui doit servir de repère à son élément superposé.

L’erreur à éviter

Un élément en position: absolute sort du flux normal. Les éléments voisins ne réservent donc aucune place pour lui.

ATELIER CSS · ENVIRON 30 MIN

Ancrer un badge sans désorganiser la page

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Garder le contenu principal dans le flux normal

Dans le flux normal, les paragraphes et les sections repoussent le contenu suivant lorsqu’ils grandissent. Le positionnement relatif conserve la place initiale de l’élément, même s’il est décalé visuellement. Le positionnement absolu retire sa boîte du flux : les éléments voisins ne réservent pas d’espace pour elle. Utilisez-le pour une petite superposition locale, plutôt que pour un paragraphe dont la hauteur dépend du contenu. Un ancêtre en position: relative sert couramment de bloc conteneur à l’élément absolu. Les transformations et certaines autres propriétés peuvent aussi établir ce repère : examinez la chaîne des ancêtres lorsque le placement vous surprend.

Le positionnement et l’empilement répondent à deux besoins différents

Un élément sticky garde sa place dans le flux et peut être décalé pour respecter un seuil dans son contexte de défilement. Il lui faut un décalage pertinent, comme top ou inset-block-start, et assez d’espace pour se déplacer. L’overflow d’un ancêtre peut changer le conteneur de défilement qui compte. z-index n’est pas un classement global de toute la page : les contextes d’empilement imbriqués regroupent leurs descendants. Augmenter le z-index d’un enfant ne lui permet pas de dépasser tous les éléments extérieurs au contexte de son ancêtre. Gardez des repères simples et vérifiez les chevauchements avec du texte agrandi avant de choisir des nombres plus élevés.

Retirez position: relative de .profile et observez le repère du badge. Rétablissez la règle, puis doublez la longueur du paragraphe.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; }
.profile { position: relative; max-width: 35rem; border: 2px solid #254fc0; padding: 4rem 1.5rem 1.5rem; }
.badge { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; background: #172b40; color: white; padding: .25rem .75rem; }
</style>
</head>
<body>
<article class="profile"><span class="badge">Nouvelle leçon</span><h1>Le positionnement en CSS</h1><p>Ce paragraphe reste dans le flux normal. Allongez-le et observez la carte grandir tandis que le badge reste attaché au coin.</p></article>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; }
.profile { position: relative; max-width: 35rem; border: 2px solid #254fc0; padding: 4rem 1.5rem 1.5rem; }
.badge { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; background: #172b40; color: white; padding: .25rem .75rem; }
</style>
</head>
<body>
<article class="profile"><span class="badge">Nouvelle leçon</span><h1>Le positionnement en CSS</h1><p>Ce paragraphe reste dans le flux normal. Allongez-le et observez la carte grandir tandis que le badge reste attaché au coin.</p></article>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.profile { padding: 1rem; }
.badge { position: absolute; top: 0; right: 0; }

Voir la correction et son explication

.profile { position: relative; padding: 3rem 1rem 1rem; }
.badge { position: absolute; top: .5rem; right: .5rem; }

Définissez un bloc conteneur local et réservez de l’espace pour le badge. Vérifiez ensuite que le padding suffit avec la taille réelle de son texte, y compris lorsqu’il est agrandi.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez une carte avec un badge dans un coin et, séparément, un titre de section en sticky. Notez le bloc conteneur et le contexte de défilement qui déterminent leur position.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ancrer un badge sans désorganiser la page — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Ancrer un badge sans désorganiser la page</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ancrer un badge sans désorganiser la page — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Ancrer un badge sans désorganiser la page</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Un paragraphe plus long agrandit la carte sans recouvrir le contenu suivant.Le badge reste rattaché à sa carte et ne masque pas le titre.Le titre sticky possède un décalage et a été testé dans son véritable conteneur de défilement.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quel mode de positionnement retire la boîte du flux normal ?relativestaticabsolute

2. Qu’est-ce qui définit couramment le bloc conteneur d’un badge en position absolue ?position: relative sur l’ancêtre auquel le badge appartientUne taille de police plus grandemargin: auto sur le badge

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Normal Flow, Display, and Positioning

Comprendre à quoi le badge est rattaché

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Ancrer un badge sans désorganiser la page

Garder le contenu principal dans le flux normal

Le positionnement et l’empilement répondent à deux besoins différents

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris