Positions Webflow : static, relative, absolute, fixed, sticky

Les 5 positions Webflow en un tableau

La propriété CSS position décide de deux choses : l'élément garde-t-il sa place dans la page, et par rapport à quoi ses décalages (top, right, bottom, left) sont-ils calculés ?

Où régler la position dans Webflow ?

Sélectionnez l'élément, ouvrez le Style panel et descendez jusqu'à la section Position. D'après l'article d'aide Webflow sur les propriétés de position (mis à jour le 15 mai 2026), vous y trouvez :

• le menu de position : Static, Relative, Absolute, Fixed, Sticky ;
• pour absolute et fixed, des préréglages (Top left, Top right, Bottom left, Bottom right, Left, Right, Top, Bottom, Full) qui posent des décalages à 0 ;
• les champs top, right, bottom et left, à saisir, glisser ou passer en auto ;
• l'indicateur de relativité, qui affiche l'élément servant de repère ;
• le champ z-index, actif seulement si la position n'est pas static ;
• les options Float et Clear.

Webflow a publié une vidéo officielle qui montre chaque position dans le Designer :

Position static : le comportement par défaut

Static est la valeur par défaut de tout élément. Il suit le flux normal : les éléments s'empilent dans l'ordre du Navigator, et les valeurs top, left, right ou bottom n'ont aucun effet. Choisir Static est aussi le moyen de retirer un positionnement appliqué par erreur.

Position relative : décaler sans bousculer

Un élément en relative garde sa place dans la page, mais peut être décalé par rapport à sa position d'origine. Avec left: 20px, il se déplace de 20 pixels vers la droite et l'espace qu'il occupait reste réservé : les éléments voisins ne bougent pas.

Son usage principal est ailleurs : un élément en relative devient le repère de ses enfants en absolute. C'est le réglage à poser sur une carte pour y placer un badge dans un coin. Il active aussi le z-index.

Position absolute : placer un élément sur un autre

Un élément en absolute sort du flux : il n'occupe plus d'espace et les autres éléments se comportent comme s'il n'existait pas. Il se place par rapport à son ancêtre positionné le plus proche (relative, absolute, fixed ou sticky). S'il n'en trouve pas, il se place par rapport au body.

La méthode fiable en trois gestes :

1. Passez le parent en Relative.
2. Passez l'enfant en Absolute et choisissez un préréglage (Top right pour un badge, Full pour un calque qui couvre tout le parent).
3. Vérifiez dans l'indicateur de relativité que le repère est bien le parent voulu, puis ajustez le z-index.

Usages courants : badges, icônes posées sur une image, calques de couleur, menus déroulants, tooltips. Pour les fenêtres modales, voir notre guide sur les pop-ups dans Webflow.

Position fixed : rester visible pendant le défilement

Un élément en fixed sort du flux et se place par rapport à la fenêtre du navigateur. Il reste au même endroit quand l'internaute fait défiler la page. C'est le réglage classique d'une barre de navigation, d'un bouton de contact flottant ou d'un bandeau de cookies.

Deux pièges. D'abord, une navbar fixed ne réserve plus sa hauteur : ajoutez un padding-top équivalent à la première section pour que le contenu ne passe pas dessous. Ensuite, comme l'explique la documentation MDN sur la propriété position, si un ancêtre a une propriété transform, perspective ou filter différente de none, l'élément fixed se place par rapport à cet ancêtre et non plus à la fenêtre. Une interaction Webflow qui anime un transform sur un parent suffit à provoquer ce bug.

Position sticky : coller à partir d'un seuil

Un élément en sticky se comporte comme un élément relative jusqu'à un seuil de défilement, puis reste collé comme un élément fixed, mais seulement à l'intérieur de son parent direct. Quand le bas du parent arrive, l'élément repart avec lui.

Exemple : un sommaire en sticky avec top: 100px reste à 100 pixels du haut de l'écran tant que la colonne qui le contient est visible. Le parent doit donc être plus haut que l'élément sticky, sinon il n'y a aucune place pour coller.

Pourquoi mon sticky ne fonctionne pas ?

Chez Synqro, quand un sticky ne colle pas sur un projet Webflow, nous vérifions ces points dans cet ordre :

1. Aucun décalage n'est défini : il faut au moins une valeur top, bottom, left ou right.
2. Un parent ou un ancêtre a un overflow réglé sur hidden, scroll ou auto. C'est la cause la plus fréquente : passez-le en visible ou utilisez overflow: clip.
3. Le parent a une hauteur fixe, ou il n'est pas plus haut que l'élément sticky.
4. Dans une grille ou un flex, l'élément est étiré sur toute la hauteur : réglez son alignement sur Start pour qu'il garde sa hauteur naturelle.

Float et clear : à réserver à l'habillage de texte

Float place un élément à gauche ou à droite de son conteneur et laisse le texte s'enrouler autour. Webflow propose Float left, Float right et Float none (par défaut). Clear (none, left, right, both) empêche un élément de s'enrouler autour des éléments flottants qui le précèdent.

Float vient d'une époque où il servait à construire des colonnes. Aujourd'hui, utilisez Flexbox ou Grid pour la mise en page, plus simples et plus robustes en responsive (voir notre guide de mise en page sur Webflow), et gardez float pour une image habillée par un paragraphe dans un article.

Z-index : gérer les superpositions

Le z-index décide quel élément passe devant quand deux éléments positionnés se chevauchent. Dans Webflow, le champ n'agit que si la position n'est pas static. Un élément positionné passe toujours devant un élément static.

Le piège classique : un enfant avec un z-index de 9999 reste derrière un élément voisin de son parent si ce parent a lui-même un z-index plus faible. Le z-index se compare entre éléments du même niveau. Fixez donc une petite échelle pour tout le site, par exemple 10 pour les calques, 100 pour la navigation, 1000 pour les modales.

Bonnes pratiques de positionnement dans Webflow

• Construisez la mise en page avec Flexbox et Grid, et réservez absolute aux éléments décoratifs ou superposés.
• Ne placez jamais un bloc de texte en absolute : il ne pousse plus rien et finit par chevaucher le reste sur mobile.
• Vérifiez chaque breakpoint : une position peut être modifiée par breakpoint, et un absolute pensé pour desktop casse souvent en tablette.
• Nommez vos classes de façon explicite (badge-top-right, nav-fixed) pour retrouver vite qui est positionné. Notre guide du Webflow Designer détaille l'organisation des classes.

Synqro est une agence Webflow Premium Partner, fondée en 2019, avec une équipe de production en France. Si votre site accumule les chevauchements et les sticky capricieux, notre équipe Webflow peut reprendre la structure.