On part d’un cas fréquent : une maquette Figma avec un header, une grille de cards et un tooltip qui apparaît au survol d’un bouton. Le réflexe, c’est de caler chaque élément en absolute CSS positioning pour coller pixel-perfect au design. Ça fonctionne sur un écran fixe.
Dès qu’on passe en responsive ou qu’on ajoute un menu déroulant, tout casse. Le vrai sujet n’est pas de choisir un camp, mais de comprendre où chaque technique fait le travail sans créer de dette technique.
A lire aussi : Framework JavaScript : comment choisir le meilleur pour vos projets ?
Overlays, tooltips et menus : le seul vrai territoire du positionnement absolu
Le positionnement absolu retire un élément du flux normal de la page. Il ne pousse plus ses voisins, il flotte par rapport à son conteneur positionné (celui qui porte un position: relative). C’est exactement ce dont on a besoin pour un tooltip, un badge de notification ou un menu contextuel.
En pratique, on crée un conteneur flex pour la structure du composant, puis on place l’overlay en position: absolute à l’intérieur. Le conteneur flex gère l’alignement des éléments visibles, l’absolu gère ce qui se superpose.
A lire également : Meilleur framework PHP : comment choisir le plus adapté à vos besoins ?
- Un tooltip accroché à un bouton : le bouton reste dans le flux flex, le tooltip est en absolute avec un
topet unleftcalculés par rapport au bouton (ou à son wrapper enposition: relative) - Un menu déroulant sous une barre de navigation flex : le menu sort du flux pour ne pas décaler le contenu en dessous
- Un badge « nouveau » positionné dans le coin d’une card : la card est un flex item, le badge est en absolute dans la card
La spécification CSS Flexbox précise d’ailleurs le comportement des enfants en position: absolute dans un conteneur flex. Un enfant absolu dans un conteneur flex ne participe plus au calcul flex, mais il se positionne par rapport aux limites de ce conteneur. Les navigateurs ont progressivement harmonisé ce comportement, ce qui réduit les incohérences entre Chrome, Firefox et Safari.
Flexbox pour la structure de maquette responsive
Flexbox a été conçu pour distribuer de l’espace entre des éléments dans une direction (ligne ou colonne). C’est le bon outil pour organiser les blocs principaux d’une page : header, conteneur de colonnes, pied de page.
La différence fondamentale avec le positionnement absolu : flexbox garde chaque élément dans le flux du document. Quand un bloc grandit (texte plus long, contenu traduit dans une autre langue), ses voisins s’adaptent. En absolu, rien ne bouge automatiquement, et le contenu déborde ou se chevauche.
Gestion du responsive avec flexbox et media queries
On combine flex-wrap avec des @media queries pour réorganiser les colonnes selon la largeur de l’écran. Sur mobile, les cards passent en colonne unique. Sur desktop, elles se répartissent sur trois colonnes. Le conteneur flex gère la distribution, les media queries ajustent les proportions.
Avec du positionnement absolu, cette réorganisation exige de recalculer chaque top, left, width et height dans chaque breakpoint. Le volume de CSS explose, et chaque modification de maquette impose de reprendre tous les calculs.
Maquette fidèle au design sans dépendre du positionnement absolu
Le piège classique, c’est de reproduire la maquette Figma en plaçant chaque div en absolu parce que Figma affiche des coordonnées X/Y. On obtient un résultat visuellement correct à une seule résolution, mais inutilisable ailleurs.
L’approche qui tient dans le temps : utiliser flexbox pour la structure, puis le positionnement absolu uniquement pour les couches superposées. Concrètement, cela donne une architecture CSS prévisible.
Cas concret : card avec image, texte et badge promo
La card est un conteneur flex en colonne. L’image occupe le haut, le bloc texte le bas, avec un gap entre les deux. Le badge « promo » est positionné en absolu dans le coin supérieur droit de la card (qui porte un position: relative).
Si le texte passe du français à l’allemand (souvent plus long), le conteneur flex étire la card sans casser la mise en page. Le badge reste ancré au coin parce qu’il est en absolu par rapport au conteneur, pas par rapport à la page.
Anchor positioning CSS : la nouvelle alternative pour les overlays
Les navigateurs commencent à prendre en charge une propriété appelée position-anchor, qui fait partie de la spécification CSS Anchor Positioning. Cette approche permet de lier un élément positionné (tooltip, popover) directement à un autre élément de la page, sans avoir besoin de calculer manuellement les offsets top/left.
Anchor positioning réduit le JavaScript nécessaire pour les tooltips et popovers. Aujourd’hui, la plupart des bibliothèques JS (Floating UI, Popper) recalculent la position des overlays au scroll et au resize. Avec l’anchor positioning natif, le navigateur gère ce recalcul.
Le support navigateur reste partiel. On ne peut pas encore baser toute une maquette de production sur cette propriété. Les retours varient sur la stabilité selon les versions de navigateur. Pour l’instant, on garde le pattern classique (conteneur relatif + enfant absolu) comme solution de repli.
Quand mélanger absolute et flexbox dans la même maquette
Le mélange des deux n’est pas un compromis bancal, c’est la pratique standard sur la majorité des interfaces modernes. La règle de décision tient en deux questions :
- L’élément doit-il pousser ou être poussé par ses voisins dans la mise en page ? Si oui, flexbox
- L’élément doit-il se superposer à d’autres sans affecter leur position ? Si oui, positionnement absolu
- L’élément doit-il suivre un autre élément précis lors du scroll (tooltip, popover) ? Anchor positioning si le support le permet, sinon absolu avec JS
On n’a jamais besoin de choisir exclusivement l’un ou l’autre. Le vrai problème arrive quand on utilise l’absolu pour ce que le flux devrait gérer : alignement de colonnes, espacement régulier entre des éléments, adaptation à la largeur de l’écran. Dans ces cas, chaque modification de contenu ou de traduction casse la mise en page, et la maintenance devient un chantier permanent.
Pour une maquette propre, on structure d’abord l’ensemble avec flexbox (ou CSS Grid pour les layouts bidimensionnels), puis on ajoute le positionnement absolu là où un élément doit sortir du flux. Cette séparation claire entre structure et superposition garde le code lisible et la maquette fidèle au design sur tous les écrans.
