# Positionnement personnalisé Elementor : sortir du flux sans tout casser sur mobile > Le contrôle de positionnement avancé d'Elementor permet un effet visuel précis en un clic. Sur mobile, il devient vite le meilleur moyen de casser une mise en page entière. - Auteur : Clément Hadrot - Publié le : 2024-06-21 - Mis à jour le : 2024-06-21 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/positionnement-personnalise-elementor-hors-flux/ ## L’essentiel - Un élément en position absolute sort du calcul de hauteur du parent - Le décalage en pixels ne s'adapte jamais tout seul à une largeur d'écran variable - Un Container avec un overlap natif remplace souvent le besoin réel Un intégrateur souhaitait faire chevaucher légèrement une image de produit sur le bord inférieur d'une bannière de section, un effet visuel très demandé sur les sites e-commerce depuis quelques années. Le contrôle de positionnement personnalisé d'Elementor, disponible dans les réglages avancés de chaque widget, permet ce genre d'effet en trois clics : position absolue, décalage vertical négatif, largeur fixée en pixels. Le rendu sur l'écran desktop de conception était parfait. Sur un iPhone SE, la même image recouvrait entièrement le texte du bloc suivant. Ce scénario revient si souvent qu'il mérite une explication précise de ce qui se passe réellement sous le capot, plutôt qu'un simple conseil de prudence. ## Ce que fait réellement le positionnement personnalisé Activer le positionnement personnalisé sur un widget Elementor revient à lui appliquer une propriété CSS `position: absolute` ou `fixed`, associée à des décalages exprimés en unités choisies (pixels, pourcentage, viewport). Une fois en position absolue, l'élément sort entièrement du flux normal du document : son parent ne tient plus compte de sa hauteur pour calculer sa propre taille, et sa position se calcule par rapport à son ancêtre positionné le plus proche, pas nécessairement celui que l'on imagine dans l'éditeur. C'est précisément ce deuxième point qui piège le plus souvent les intégrateurs : sur un Container imbriqué à plusieurs niveaux, l'ancêtre positionné de référence n'est pas toujours la section visuellement la plus proche, mais le premier parent ayant lui-même une position autre que `static` dans la chaîne des ascendants. Un changement de structure ailleurs sur la page peut donc déplacer silencieusement l'élément positionné, sans qu'aucune modification n'ait été faite sur le widget lui-même. ## Pourquoi le décalage en pixels ne survit jamais au responsive Un décalage vertical négatif de soixante pixels, pensé pour un visuel de mille deux cents pixels de large, produit un chevauchement esthétique raisonnable. Le même décalage de soixante pixels, appliqué à un visuel qui occupe la totalité de trois cent soixante-quinze pixels de large sur un petit smartphone, recouvre une proportion bien plus importante de l'élément suivant, puisque le décalage ne s'adapte jamais proportionnellement à la taille réelle du visuel sans réglage manuel supplémentaire par breakpoint. > L'essentiel à retenir : Un élément en position absolute sort du calcul de hauteur du parent ; Le décalage en pixels ne s'adapte jamais tout seul à une largeur d'écran variable ; Un Container avec un overlap natif remplace souvent le besoin réel ## L'alternative en Containers natifs Depuis la généralisation des Containers flexbox, Elementor permet un chevauchement contrôlé sans sortir du flux normal, via une marge négative appliquée directement sur un Container enfant, combinée à un `z-index` pour l'ordre d'affichage. Cette approche garde l'élément dans le flux : la hauteur du parent continue d'en tenir compte, ce qui limite très fortement le risque de recouvrement imprévu sur petit écran, puisque la marge négative peut être réglée indépendamment par breakpoint, exactement comme n'importe quelle autre valeur d'espacement dans l'éditeur. - Créer un Container parent en `overflow: visible` pour autoriser le débordement contrôlé. - Appliquer une marge négative sur le Container enfant contenant le visuel, réglée séparément sur chaque breakpoint. - Ajuster le `z-index` uniquement si un chevauchement d'ordre d'affichage est nécessaire. - Vérifier le rendu sur le plus petit breakpoint défini avant de considérer l'effet terminé. ## Quand le positionnement personnalisé reste justifié Il existe des cas où sortir réellement du flux du document est la bonne solution : un badge fixe qui doit rester visible au défilement, une info-bulle positionnée par rapport au curseur, un élément décoratif totalement indépendant du contenu textuel environnant. Dans ces cas, le positionnement personnalisé reste l'outil adapté, à condition de tester systématiquement chaque breakpoint défini sur le site, et de préférer des unités relatives (pourcentage, `vw`) aux pixels fixes dès que l'effet doit rester proportionnel à la largeur d'écran. > Le positionnement personnalisé n'est pas un raccourci gratuit vers un effet visuel : c'est un renoncement au calcul automatique de mise en page, avec toute la responsabilité de vérification que cela implique sur chaque taille d'écran. ## En résumé Avant d'activer le positionnement personnalisé sur un widget Elementor, il vaut la peine de se demander si un chevauchement obtenu via une marge négative dans un Container flexbox ne répondrait pas au même besoin visuel, avec un comportement responsive natif et prévisible. Réserver le positionnement personnalisé aux cas où l'élément doit véritablement s'affranchir du flux du document évite la majorité des ruptures de mise en page observées sur mobile.