Positionnement CSS et Systemes de Coordonnees

Demo en Direct : Basculer les Modes de Positionnement

Choisissez une valeur de position et faites glisser les curseurs. La boite rouge se repositionne et l'affichage des coordonnees vous montre exactement ou se trouve son point d'origine et comment top/left se traduisent en decalages de pixels. C'est le moyen le plus rapide d'interioriser la difference entre relative et absolute.

Le Positionnement comme Systeme de Coordonnees, Pas Regle de Layout

Voici le changement mental qui fait cliquer le positionnement CSS : top, right, bottom et left sont des coordonnees, pas des marges. Quand vous ecrivez top: 50px, vous placez l'element a 50 pixels en dessous d'un point d'origine specifique. La question est : origine de quoi ?

Chaque element positionne vit dans un containing block (bloc conteneur) -- la boite qui definit son origine de coordonnees. Voyez-le comme le point (0, 0) pour cet element. Le containing block est different selon la valeur de position que vous utilisez, et c'est la chose la plus confuse du positionnement CSS.

Pour position: absolute et position: fixed, l'element est retire entierement du flux normal du document. Ses coordonnees sont mesurees par rapport au containing block, pas par rapport a ses freres ou parent dans le flux normal. C'est pourquoi un element en position absolue peut superposer d'autre contenu -- il a quitte le systeme de coordonnees du flux du document.

Les Cinq Valeurs de position, Selon une Perspective de Coordonnees

Le tableau ci-dessus est la reference. Deballonnen maintenant les trois choses qui causent le plus de confusion dans la pratique.

Containing Block : Le Concept que la Plupart des Tutoriels Passent sous Silence

Si vous devez retenir une chose de cette page, que ce soit celle-ci : position: absolute n'est pas relatif a l'element parent. Il est relatif a l'ancetre positionne le plus proche -- le premier ancetre en remontant l'arbre qui a position avec une valeur autre que static.

Cela piege tout le monde la premiere fois. Vous mettez position: absolute sur un enfant, vous definissez top: 0; left: 0;, et l'element s'envole au coin de la page au lieu du coin du parent. La raison : le parent a position: static (par defaut), donc le navigateur remonte l'arbre cherchant un ancetre positionne, n'en trouve aucun, et utilise le viewport comme containing block.

  
  
I am lost

La solution est toujours la meme : ajoutez position: relative au parent. Cela etablit le parent comme containing block, et maintenant le top/left de l'enfant sont mesures depuis le bord de padding du parent.

  
  
I am anchored

Le Piege du transform

Voici un piege qui a fait perdre des heures aux developpeurs : si vous mettez transform, perspective, filter, backdrop-filter, will-change: transform ou contain: paint sur un element, il devient le containing block de tous les descendants en position: fixed. Pas seulement les enfants directs -- n'importe quel descendant.

Cela signifie que votre barre de navigation en position fixe defile soudainement avec la page au lieu de rester en place, parce qu'un ancetre 10 niveaux au-dessus a un transform: translateZ(0) pour l'acceleration GPU. La solution est de comprendre ce qui cree des containing blocks :

/* This ancestor looks innocent... */
.site-wrapper {
  transform: translateZ(0); /* GPU optimization */
}

/* ...but it hijacks fixed positioning for ALL descendants */
.nav {
  position: fixed;
  top: 0;
  /* BUG: this is now relative to .site-wrapper,
     not the viewport. It scrolls with the page. */
}

Les proprietes qui creent un containing block pour les descendants en position: fixed : transform, perspective, filter, backdrop-filter (ou supporte), will-change avec valeur transform/perspective/filter, et contain: paint ou contain: layout. Si votre element fixed se comporte mal, remontez l'arbre DOM et verifiez ces proprietes.

Stacking Contexts : Le Systeme de Coordonnees de l'Axe Z

Le positionnement gere X et Y. z-index gere Z -- mais il ne fonctionne pas comme la plupart des gens le pensent. z-index ne fonctionne que dans un stacking context (contexte d'empilement), et un stacking context n'est pas la meme chose que le document.

Voyez un stacking context comme une couche isolee. Les elements a l'interieur peuvent s'empiler relativement entre eux, mais la couche entiere est positionnee comme une unite contre les autres couches. Donc un z-index: 9999 dans un stacking context peut toujours etre derriere un z-index: 1 dans un stacking context different de niveau superieur.

Qu'est-ce qui cree un stacking context ?

• L'element racine (<html>)
• position: absolute ou position: relative avec z-index different de auto
• position: fixed ou position: sticky (toujours, independamment du z-index)
• Tout element avec opacity inferieur a 1
• Tout element avec transform, filter, perspective, backdrop-filter ou will-change
• mix-blend-mode different de normal
• isolation: isolate

La consequence pratique : si votre modale avec z-index: 9999 apparait derriere un menu deroulant avec z-index: 10, c'est presque certainement parce que la modale est dans un stacking context (cree par un transform ou opacity sur un ancetre) qui se trouve lui-meme sous le stacking context du menu deroulant. Vous ne pouvez pas regler ca en augmentant le z-index de la modale -- vous devez sortir la modale du stacking context de l'ancetre, ou supprimer la propriete qui le cree.

Unites de Viewport et Positionnement Responsive

Quand vous utilisez position: fixed ou position: absolute avec des decalages en pourcentage, ces pourcentages sont relatifs aux dimensions du containing block, pas a la taille de l'element lui-meme. top: 50% signifie 50% de la hauteur du containing block.

Les unites de viewport vous permettent de positionner relativement a la fenetre reelle du navigateur :

Les unites dvh / dvw / svh / lvh sont plus recentes et resolvent le probleme de Safari mobile ou 100vh inclut la zone derriere la barre URL, causant la coupure du contenu. Utilisez 100dvh au lieu de 100vh pour les elements qui doivent remplir le viewport visible.

Motifs Reels qui Fonctionnent Vraiment

Overlay de Modale Centre

Le motif pour une modale centree qui fonctionne partout. La cle est de combiner position: fixed avec inset: 0 (raccourci pour les quatre cotes) et place-items: center :

.modal-backdrop {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.5);
  display: grid;
  place-items: center; /* centers the modal */
  z-index: 1000;
}
.modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

En-tete de Tableau Sticky

position: sticky sur un en-tete de tableau est le moyen le plus propre de garder les etiquettes de colonne visibles pendant le defilement. L'astuce : top: 0 definit quand il s'accroche, et le conteneur de defilement doit etre le parent de defilement du tableau :

.table-scroll {
  max-height: 400px;
  overflow: auto;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff; /* must be opaque */
  z-index: 1;
}

Infobulle au Survol

Le motif parent relative / enfant absolute pour les infobulles. L'infobulle est cachee par defaut et revelee au survol :

.tooltip-trigger {
  position: relative; /* containing block for tooltip */
  display: inline-block;
}
.tooltip {
  position: absolute;
  bottom: 100%; /* sits above the trigger */
  left: 50%;
  transform: translateX(-50%); /* horizontal center */
  margin-bottom: 8px;
  padding: .5rem .75rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 6px;
  font-size: .85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

Cadre de Decision : Quelle position Utiliser

FAQ