Chargement...

Position en CSS

Les leçons de flux ont dit aux boîtes comment rejoindre une ligne. position répond à une autre question : où cette boîte s’assoit-elle par rapport à sa place normale, à un ancêtre, ou à l’écran ? Maîtrisez les cinq valeurs du quotidien avant d’empiler ou d’utiliser float.

Une boîte à outils position

📊 Position en un coup d’œil

Valeur	Rôle quotidien
`static`	Défaut — les offsets comme top/left ne servent guère
`relative`	Décale depuis sa place normale ; garde son espace ; peut ancrer des enfants absolute
`absolute`	Sorti du flux normal ; placé par rapport à l’ancêtre positionné le plus proche
`fixed`	Sorti du flux ; épinglé au viewport pendant le défilement
`sticky`	Agit en relative jusqu’à un seuil de scroll, puis se colle dans son conteneur

Les offsets top, right, bottom et left ne comptent que lorsque position n’est pas static. Choisissez d’abord le mode, puis affinez l’offset.

Relative — un décalage poli

relative garde l’élément dans le flux. L’espace d’origine reste réservé. De petits offsets conviennent aux ajustements optiques — et pour marquer un parent que les enfants absolute doivent respecter.

Décalage relative

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — quitter le flux

absolute tire la boîte hors du flux normal. Les voisins ferment l’écart. Le placement utilise l’ancêtre le plus proche avec position autre que static — souvent un parent relative. Sans cet ancrage, l’élément peut remonter vers un bloc conteneur plus large.

Badge absolute

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Offrir un foyer à absolute

Associez les enfants absolute à un parent intentionnel. Nommez la relation avec des classes pour garder la mise en page lisible.

Parent positionné

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — collé au viewport

fixed épingle l’élément à l’écran. Faire défiler la page ne le déplace pas. Utilisez-le pour des avis calmes ou des barres d’outils — pas comme raccourci pour chaque mise en page en colonnes.

Avis fixed

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — relative, puis collé

sticky reste dans le flux jusqu’à un seuil de défilement (top est courant), puis se colle dans son ancêtre scrollable. Il faut de la place pour scroller et un parent sensé — sinon cela paraît cassé.

Libellé de section sticky

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Une habitude position calme

Utilisez relative pour de petits décalages et des ancrages absolute. Utilisez absolute pour badges et superpositions dans un parent connu. Réservez fixed et sticky au chrome intentionnel. Laissez le stacking z-index et le clear float pour leurs leçons.

Rôles position nommés

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

À vous de jouer

Décalez une .card avec position: relative et de petits top / left.
Placez un .badge en absolute dans un parent .media relative.
Ajoutez un petit avis fixed dans un coin — faites défiler et observez.
Essayez un libellé sticky avec top: 0 dans une section haute scrollable.
Écrivez une phrase : quand absolute est-il plus sûr que fixed ?

Erreurs fréquentes

Utiliser absolute sans parent positionné et s’étonner qu’il saute loin
Recourir à fixed pour résoudre une mise en page de page ordinaire
Attendre que sticky marche sans overflow de scroll ou avec des ancêtres conflictuels
Traiter cette leçon comme celle des rangées inline-block (autre métier)
Déverser ici des recettes z-index ou float au lieu d’apprendre les modes de placement

Résumé

position contrôle le placement par rapport au flux, aux ancêtres ou au viewport
relative décale et ancre ; absolute quitte le flux dans cet ancrage
fixed épingle au viewport ; sticky mélange relative et collé
Les offsets comptent seulement si position n’est pas static
Gardez stacking et float pour plus tard — maîtrisez d’abord les cinq modes

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue