Positionner et superposer des éléments
Une carte décalée, un badge posé sur une image et un menu qui reste visible n’utilisent pas le même placement. Choisissez d’abord le comportement adapté, puis ajustez sa position.
1. Ouvrir les commandes de placement
Sélectionnez l’élément dans l’aperçu ou les Calques. En Expert, ouvrez le groupe Position, puis ajoutez Position avec le bouton + si le réglage est absent. Vous utilisez les commandes visuelles du panneau, sans saisir de code.
2. Choisir le bon repère
Lecture impossible. Réessayez avec les commandes vidéo.
| Comportement | À quoi sert-il ? | Point à surveiller |
|---|---|---|
| Static | Garder la place normale de l’élément dans la page. | Les coordonnées ne servent pas à le décaler. |
| Relative | Décaler visuellement l’élément depuis sa place normale. | Sa place initiale reste réservée. |
| Absolute | Poser l’élément dans un parent servant de repère. | Il ne réserve plus de place dans la disposition. |
| Fixed | Fixer un élément par rapport à la fenêtre. | Il peut recouvrir le contenu ; certains parents transformés changent le repère. |
| Sticky | Garder l’élément dans la disposition puis le retenir au défilement. | Le seuil, le parent et sa zone de défilement limitent son déplacement. |
Les noms du sélecteur peuvent apparaître en anglais dans cette version. Pour une mise en page classique, commencez par les lignes, colonnes et grilles. Réservez le placement absolu aux éléments qui doivent se superposer, comme un badge.
3. Régler les coordonnées
Après avoir choisi Relative, réglez les distances aux bords dans Coordonnées. Une distance depuis le haut décale l’élément vers le bas ; une distance depuis la gauche le décale vers la droite. Commencez par une petite valeur et regardez le résultat.
Pour un élément Absolute, sélectionnez aussi son conteneur et donnez-lui un placement Relative : il devient le repère si aucun parent positionné plus proche ne s’interpose. Vérifiez ensuite les distances du badge aux bords de ce conteneur. Évitez de contraindre les quatre bords et une taille fixe sans intention précise.
En Sticky, le panneau présente le seuil supérieur. Le résultat se vérifie en faisant défiler la page : choisir Sticky seul ne garantit pas qu’un élément restera toujours visible.
4. Régler ce qui passe devant
Dans Mise en page, ajoutez Z-index. Une valeur plus élevée peut placer l’élément devant un autre lorsqu’ils appartiennent au même contexte de superposition. Elle ne déplace pas l’élément.
Si une valeur très élevée ne suffit pas, regardez les parents : une transformation ou une opacité peut créer une zone de superposition indépendante. Augmenter toujours davantage le nombre ne règle pas ce cas.
5. Vérifier le résultat sur chaque écran
Testez le défilement et les liens dans l’aperçu visiteur, puis comparez les écrans. Un badge bien placé sur ordinateur peut masquer un titre sur mobile. Utilisez une règle d’écran quand le placement doit changer, et gardez le contenu principal dans une disposition souple.
À retenir : le mode choisit le repère, les coordonnées règlent la distance et le Z-index règle la superposition.