Quand une mise en page “bouge” mal dans Framer, le problème vient presque toujours de la position d’un calque.

Comprendre ces 4 modes te fait gagner du temps.
Tu sais quoi choisir.
Et tu sais quoi éviter.

La position, ce n’est pas un détail. C’est ce qui décide si ton élément suit le flux ou s’en échappe.

Où se règle la position dans Framer

Tu changes la position d’un calque dans le panneau de droite.

Étapes :

1. Sélectionne ton calque

2. Rend toi dans le panneau de droite

3. Repère Position

4. Choisis Relative, Absolute, Fixed ou Sticky

Astuce
Si ton calque est dans un Stack, le choix de position a un impact direct sur le comportement “dans le flux” du layout.

Relative : le mode normal, dans le flux

À quoi ça sert

Relative signifie que ton calque reste dans le flux du layout.

Concrètement :

• Il prend sa place dans le Stack ou la Grid

• Les autres éléments s’alignent autour de lui

• Il réagit bien au responsive

Quand l’utiliser

• Pour 90% des sections

• Pour des boutons, textes, cards dans un Stack

• Dès que tu veux un layout propre et flexible

Ce que tu dois retenir

Relative est le choix le plus sûr.
Si tu hésites, commence par Relative.

Absolute : hors du flux, placé par rapport au parent

À quoi ça sert

Absolute te permet de placer un calque “librement” sans qu’il pousse les autres.

Concrètement

• Le calque sort des contraintes du layout du parent

• Il se positionne par rapport à son parent

• Les autres éléments se comportent comme s’il n’existait pas

Quand l’utiliser

• Pour un badge sur une carte

• Pour une icône dans un coin

• Pour un décor, une forme, un glow

• Pour superposer une image sur un bloc texte

Bon réflexe

Avant de passer en Absolute, vérifie que ton parent est bien celui que tu veux.
Sinon, tu vas “courir” après ton calque.

Fixed : épinglé au viewport

À quoi ça sert

Fixed garde ton calque à la même place dans l’écran, même quand tu scroll.

Concrètement

• L’élément se positionne par rapport au viewport

• Il ne bouge pas au scroll

• C’est parfait pour une navbar fixe ou un bouton flottant

Point important dans Framer

Dans Framer, tous les éléments ne peuvent pas toujours être mis en Fixed.
Un cas classique : si ton élément n’est pas au bon niveau dans la page, l’option peut être bloquée.

Si tu ne peux pas activer Fixed, vérifie d’abord la structure dans le panneau Layers.

Quand l’utiliser

• Navbar fixe

• Bouton “Contact” flottant

• Badge “Promo” qui reste visible

• Sidebar toujours affichée sur desktop

Sticky : “fixe” seulement pendant une partie du scroll

À quoi ça sert

Sticky garde ton calque dans le flux, puis le “colle” au viewport quand il atteint un bord.

Concrètement

1. Le calque défile normalement au début

2. Il se fixe quand il touche le bord défini

3. Il se “décolle” quand sa zone de défilement se termine

Quand l’utiliser

• Titres de section qui restent visibles

• Sommaire de page

• Effets de stacking cards

• Colonnes explicatives qui accompagnent une galerie

Deux réglages qui bloquent souvent Sticky

• Le parent ne scroll pas

• Le parent a un overflow qui empêche le comportement attendu (doit être en visible ou clip)

Framer a justement fait évoluer l’overflow par défaut pour mieux fonctionner avec Sticky, donc si tu vois un comportement étrange, regarde aussi ce point.

Choisir rapidement le bon mode

Utilise cette logique :

1. Tu veux un layout responsive propre et automatique
   Choisis Relative

2. Tu veux superposer un élément sans casser le layout
   Choisis Absolute

3. Tu veux qu’un élément reste visible tout le temps
   Choisis Fixed

4. Tu veux qu’il reste visible seulement sur une portion de scroll (exemple : un section)
   Choisis Sticky

Bonnes pratiques

• Commence toujours en Relative, puis “débloque” seulement ce qui doit sortir du flux

• Utilise Absolute pour du décor et des petits éléments, pas pour construire toute une section

• Pour Fixed, garde une structure simple, au bon niveau dans la page

• Pour Sticky, teste sur plusieurs hauteurs d’écran, surtout mobile, car le scroll disponible change vite

Erreurs fréquentes à éviter

1. Mettre trop d’éléments en Absolute
   Résultat : responsive fragile, calques qui se chevauchent mal

2. Utiliser Fixed dans une structure trop imbriquée
   Résultat : option indisponible ou comportement inattendu

3. Attendre de Sticky qu’il se comporte comme Fixed
   Sticky dépend d’une zone de scroll, Fixed non

4. Oublier que Relative est la base dans les layouts Stack et Grid
   Résultat : on complique le layout inutilement

Pour aller plus loin

Si tu veux appliquer ces positions dans un cas concret, tu peux mettre ces cas en pratique en suivant ces guides :

1. Maîtriser l’effet d’empilement au scroll (Stacking Cards) pour pratiquer Sticky

2. Cacher sa navbar au scroll en 2 min pour comprendre un usage fréquent lié à la navigation et au scroll

Résumé

1. Relative : dans le layout, le plus stable

2. Absolute : hors des paramètres du layout, positionné par rapport au parent

3. Fixed : épinglé au viewport tout le temps

4. Sticky : épinglé seulement sur une portion de scroll