Positionnement CSS expliqué simplement (static à sticky)

Quand on débute en CSS, tout semble plutôt logique. On écrit du HTML, on ajoute un peu de couleur, des marges, des tailles… et tout va bien. Puis arrive un jour où l’on veut placer un élément précisément. Pas « à peu près », mais exactement là où on l’imagine. Et là, c’est souvent le chaos. L’élément refuse de bouger, se superpose à un autre, ou disparaît complètement de l’écran. Vous allez apprendre à maitriser le positionnement CSS de static à sticky en passant par absolute à relative !

• Comprendre pourquoi certains éléments refusent de se placer correctement en CSS et savoir comment reprendre le contrôle sans bricolage ni hasard
• Acquérir une logique mentale du positionnement CSS pour éviter les erreurs classiques et coder plus sereinement dès les premiers projets
• Savoir utiliser le positionnement CSS et s’appuyer sur le display css pour construire des interfaces propres et durables

Le positionnement CSS fait partie de ces notions qui paraissent simples sur le papier, mais qui deviennent vite déroutantes sans une vraie logique de compréhension. Beaucoup de débutants en développement Frontend apprennent des règles par cœur, sans réellement comprendre ce qu’elles font. Résultat : on tâtonne, on bidouille, et on croise les doigts pour que ça marche.

Dans ce chapitre, on va faire l’inverse. On va repartir de zéro, calmement, en prenant le temps de comprendre comment le navigateur pense. Une fois cette logique acquise, le positionnement CSS devient compréhensible facilement.

Le positionnement CSS, c’est quoi exactement ?

Le positionnement CSS sert à définir comment un élément HTML est placé dans la page. Autrement dit, il permet d’expliquer au navigateur où doit se trouver un élément, par rapport aux autres, par rapport à son parent, ou par rapport à la fenêtre du navigateur.

Par défaut, le navigateur suit un ordre très simple. Les éléments s’affichent les uns après les autres, de haut en bas, en respectant le flux naturel du document HTML. Ce comportement par défaut est intimement lié au display CSS, qui détermine si un élément est de type bloc, en ligne, flex, grid, etc. Le display gère la manière dont les éléments occupent l’espace, tandis que le positionnement CSS gère leur emplacement précis.

En savoir plus sur La propriété display CSS

Il est important de comprendre que le positionnement ne remplace pas le display css. Les deux travaillent ensemble. Le display définit le comportement général, le positionnement vient affiner la position quand on a besoin de plus de contrôle.

La propriété position : le cœur du sujet

En CSS, tout commence avec la propriété position. C’est elle qui indique au navigateur quelle logique de placement utiliser pour un élément donné.

Il existe cinq valeurs principales pour la propriété position. Elles ont chacune un comportement bien précis, et surtout une logique différente. Les comprendre dans le bon ordre est essentiel, car certaines dépendent directement des précédentes.

Avant d’entrer dans les cas complexes, commençons par le plus simple, celui que vous utilisez déjà sans le savoir.

position: static – Le comportement par défaut

La valeur static est la valeur par défaut de tous les éléments HTML. Cela signifie que si vous ne précisez rien, votre élément est positionné en static.

Un élément en position static suit simplement le flux normal du document. Il se place là où le HTML le prévoit, sans possibilité de le déplacer avec les propriétés top, left, right ou bottom.

Voici un exemple très simple.

<div class="box">
  Je suis une boîte
</div>

.box {
  position: static;
  top: 50px;
}

Dans cet exemple, la propriété top est totalement ignorée. Pourquoi ? Parce qu’un élément en position static ne peut pas être déplacé manuellement. Il obéit uniquement au flux normal du document, influencé les marges et les paddings.

C’est souvent une source de frustration chez les débutants. On ajoute top: 20px, rien ne bouge, et on se demande ce qui ne va pas. En réalité, tout fonctionne normalement.

position: relative – Le premier vrai pas vers le contrôle

La position relative est souvent la première valeur que l’on apprend consciemment. Elle ressemble beaucoup à static, mais avec une différence cruciale.

Un élément en position relative reste dans le flux du document, mais il peut être déplacé par rapport à sa position d’origine.

Prenons un exemple concret.

<div class="box">
  Je suis une boîte
</div>

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

Ici, l’élément se décale de 20 pixels vers le bas et de 30 pixels vers la droite par rapport à l’endroit où il aurait dû se trouver normalement.

Ce point est fondamental. L’espace initial de l’élément est conservé. Les autres éléments ne viennent pas prendre sa place. C’est comme si vous déplaciez une feuille sur un bureau, mais que son empreinte restait visible.

La première fois qu’on utilise position relative, on est souvent persuadé que les éléments autour vont se réorganiser automatiquement. En réalité, tout se superpose légèrement, et on peut penser avoir « cassé » la page. En fait, on découvre simplement que le navigateur a une mémoire très stricte de l’espace réservé.

Pourquoi relative est si important, même quand il ne bouge pas

La position relative est souvent utilisée sans même déplacer l’élément. Cela peut sembler étrange, mais c’est une base essentielle pour la suite.

Lorsqu’un élément enfant utilise position: absolute, il se positionne par rapport au premier parent positionné. Et ce parent est très souvent défini avec position: relative.

Même sans top ou left, le simple fait d’ajouter position: relative à un conteneur crée un nouveau contexte de référence. C’est une notion clé que nous exploiterons dans la suite.

À ce stade, vous comprenez déjà la logique fondamentale du positionnement CSS, ainsi que le lien implicite avec le display css et le flux du document.

position: absolute – Quand un élément sort du flux

Avec position: absolute, on entre dans une nouvelle logique, souvent mal comprise au début. Ici, l’élément sort complètement du flux normal du document. Cela signifie que le navigateur fait comme s’il n’existait plus pour les autres éléments.

Concrètement, les éléments autour ne tiennent plus compte de lui. Ils se placent comme si cet élément n’était pas là. C’est ce comportement qui provoque parfois des superpositions inattendues.

Regardons un exemple simple.

<div class="container">
  <div class="box">Boîte</div>
  <p>Du texte en dessous</p>
</div>

.container {
  width: 300px;
  border: 2px solid black;
}

.box {
  position: absolute;
  top: 20px;
  left: 20px;
  background: lightblue;
}

Dans ce cas, la boîte se place à 20 pixels du haut et de la gauche… mais par rapport à quoi ? C’est là que la logique devient essentielle.

Absolute se positionne toujours par rapport à un repère

Un élément en position absolute se positionne par rapport au premier parent ayant un positionnement autre que static. S’il n’en trouve aucun, il se positionne par rapport à la fenêtre du navigateur.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Dans l’exemple précédent, si .container n’a pas de position définie, alors .box se positionnera par rapport à la page entière.

C’est pour cela que, dans la majorité des cas, on écrit ceci :

.container {
  position: relative;
}

Et ensuite :

.box {
  position: absolute;
  top: 20px;
  right: 20px;
}

La boîte se positionne alors par rapport au conteneur, et non plus par rapport à toute la page. C’est une relation parent-enfant très importante à comprendre en positionnement CSS.

Comprendre avec une image mentale simple

Imaginez une feuille posée sur une table. Cette table, c’est le parent en position relative. La feuille, c’est l’élément en position absolute. Vous pouvez déplacer la feuille où vous voulez sur la table, mais elle ne sort pas de la table.

Si vous retirez la table, la feuille tombe par terre. Dans ce cas, le sol devient la référence, comme la fenêtre du navigateur. Cette image aide énormément à comprendre pourquoi un absolute « part n’importe où » quand on oublie le positionnement du parent.

Quand utiliser position: absolute ?

La position absolute est idéale pour positionner des éléments décoratifs ou fonctionnels, comme un badge, une icône, un bouton dans un coin, une étiquette sur une carte produit, ou encore un menu déroulant.

Elle ne remplace pas le display css. On ne l’utilise pas pour structurer une page entière, mais pour des ajustements précis, ciblés, maîtrisés.

position: fixed – Toujours visible, même en scrollant

La position fixed ressemble beaucoup à absolute, mais avec une différence majeure. Un élément en position fixed est toujours positionné par rapport à la fenêtre du navigateur, et il ne bouge pas lors du scroll.

C’est exactement ce qui est utilisé pour les barres de navigation fixes ou les boutons « retour en haut ».

Voici un exemple concret.

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  color: white;
}

Ce menu restera collé en haut de l’écran, même lorsque l’utilisateur fait défiler la page.

Contrairement à position absolute, fixed ignore totalement les parents. Peu importe où il est dans le HTML, sa référence reste toujours la fenêtre.

Attention aux effets secondaires du fixed

Un élément fixed sort également du flux du document. Cela signifie que le contenu situé en dessous peut passer derrière lui.

C’est pour cette raison qu’on ajoute souvent une marge ou un padding en haut du contenu principal pour éviter que le texte soit caché sous un menu fixe.

Ce comportement est souvent confondu avec un bug, alors qu’il s’agit simplement de la logique normale du positionnement CSS.

position: sticky – Le meilleur des deux mondes

La position sticky est souvent perçue comme magique, alors qu’elle repose sur une logique très simple. Un élément sticky est relative jusqu’à un certain point, puis devient fixed lorsque l’on atteint une position définie.

Voici un exemple.

.header {
  position: sticky;
  top: 0;
  background: lightgray;
}

Dans ce cas, l’élément se comporte normalement tant qu’il est visible dans son conteneur. Dès qu’il atteint le haut de la fenêtre, il « colle » et reste visible.

Sticky est extrêmement utilisé pour les titres de section, les menus secondaires ou les barres d’outils.

Pourquoi sticky ne fonctionne parfois pas ?

C’est une question très fréquente. Sticky ne fonctionne que si certaines conditions sont réunies. Le parent ne doit pas avoir un overflow caché, et l’élément doit rester dans les limites de son conteneur.

Sticky respecte le contexte du parent, contrairement à fixed. Il ne peut pas dépasser les limites de son bloc.

Le lien entre positionnement CSS et display css

Il est important de rappeler que le positionnement CSS ne remplace jamais le display css. Le display définit comment les éléments s’organisent entre eux, tandis que position intervient après, pour ajuster un comportement précis.

Par exemple, un élément en display flex peut tout à fait être positionné en relative ou absolute. Les deux notions sont complémentaires.

Beaucoup d’erreurs viennent du fait qu’on essaie de résoudre un problème de structure avec position, alors que display flex ou grid serait plus adapté.

Erreurs classiques des débutants (et comment les éviter)

• La première erreur est d’utiliser position absolute sans position relative sur le parent.
• La deuxième est d’abuser du positionnement pour construire une mise en page complète.
• La troisième est d’oublier que static est la valeur par défaut.

Une bonne règle consiste à toujours commencer par le display css (flexbox, grid, …) pour organiser la page, puis utiliser le positionnement CSS uniquement pour des ajustements ciblés.

Le positionnement CSS est une question de logique

Le positionnement CSS n’est pas une suite de règles à mémoriser, mais une logique à comprendre. Une fois que vous avez intégré la notion de flux, de repère et de contexte, tout devient beaucoup plus clair.

Prenez le temps d’expérimenter. Modifiez les valeurs, observez le comportement, cassez volontairement votre mise en page pour mieux comprendre ce qui se passe. C’est exactement comme cela que l’on progresse.

Avec une bonne maîtrise du positionnement CSS et du display css, vous disposez désormais de deux piliers essentiels pour construire des interfaces propres, solides et maîtrisées. Et surtout, vous n’êtes plus en train de « deviner », vous comprenez ce que vous faites. C’est à ce moment précis que le CSS commence réellement à devenir un plaisir.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr