Positionnement des éléments libres : position relative et absolue pour n'importe quel élément
L'extension Positionnement dans Master Addons est gratuite et ajoute un panneau Positionnement à l'onglet Avancé de chaque widget, colonne, section et conteneur Choisissez Relatif ou Absolu, puis définissez Décalages Haut, Droit, Bas et Gauche dans px, em ou %, avec des valeurs séparées pour le bureau, la tablette et le téléphone Utilisez-le pour les badges qui chevauchent une photo, les formes qui sortent d'une section ou les étiquettes nudgées en place.
Positionnement relatif, absolu et statique
Choisissez le type de position qui correspond au travail Relatif déplace un élément de son emplacement normal sans décaler ses voisins Absolute le place à des décalages exacts à l'intérieur du parent positionné le plus proche Static et Default gardent le flux normal de page Le type de position peut différer par appareil, de sorte qu'un élément peut se chevaucher sur le bureau et s'asseoir dans le flux sur un téléphone.
- Positionnement relatif : affiner l'alignement, comme déplacer une icône de quelques pixels vers la gauche.
- Positionnement absolu : placez des badges, des formes décoratives ou des étiquettes n'importe où à l'intérieur d'une section.
- Besoin de quelque chose épinglé à l'écran pendant que les visiteurs défilent ? utilisez l'option Fixed dans le propre Position setting d'Elementor sur les widgets et les conteneurs.
Compensations de chaque côté, plus du centre
Définir Top, Right, Bottom et Left dans px, em ou %, y compris les valeurs négatives qui poussent un élément au-delà du bord de son parent Placez un badge“NEW” à 10 px du haut et 15 px de la droite d'une carte produit L'option From Center compense un élément du centre horizontal de son parent, ce qui aide à des effets de chevauchement centrés.
- Contrôle à quatre côtés : définissez les distances entre les quatre bords du parent.
- Depuis le centre : position à partir du milieu du parent au lieu du bord gauche.
- Z-Index par appareil : décidez quel élément se trouve au-dessus lorsque les choses se chevauchent.
- Le panel vous avertit de ne pas combiner Gauche et De Centre sur le même élément.
Paramètre de position de l'élémenteur par rapport au positionnement des modules principaux
Les deux sont libres, et ils résolvent des problèmes légèrement différents Utilisez ce tableau pour choisir le bon pour un élément Pour plus de contrôle de la disposition, associez Positionnement avec Extras de conteneurs, ou ajouter du mouvement avec Transforme (Pro).
| Position Élémenteur | Positionnement des modules complémentaires principaux | |
|---|---|---|
| Prix | Gratuit | Gratuit |
| Types de postes | Par défaut, Absolu, Corrigé | Par défaut, Statique, Relatif, Absolu |
| Compensations | Une horizontale et une verticale | En haut, à droite, en bas, à gauche et à partir du centre |
| Type de position par appareil | Non | Oui |
| Fonctionne sur | Widgets et conteneurs | Widgets, conteneurs, sections et colonnes |
| Reste à l'écran pendant le défilement | Oui, avec Fixe | Non |
Comment chevaucher les éléments dans Elementor avec Positionnement
Cet exemple place un badge “Sale” sur le coin supérieur droit d'une image de produit Les mêmes étapes fonctionnent pour les formes, les icônes et les étiquettes.
- Assurez-vous que l'extension Positionnement est activée dans le tableau de bord Master Addons.
- Mettez l'image et le widget du badge dans le même conteneur.
- Sélectionnez le conteneur, accédez à Avancé > Positionnement et définissez Type de position sur Relatif.
- Sélectionnez le badge, définissez Type de position sur Absolu, puis définissez Haut et Droit sur 10 px.
- Réglez l'indice Z du badge sur 2 pour qu'il reste au-dessus de l'image.
- Passez à la vue tablette et mobile et ajustez les décalages pour chaque écran.
Vous voulez que toute la carte soit cliquable ? Ajouter Lien d'emballage au conteneur Pour tout ce que le panneau ne couvre pas, écrivez vos propres règles avec Css personnalisé.
Questions Fréquemment Posées Pour Positionnement
En quoi est-ce différent du propre paramètre de position d'Elementor ?
Le paramètre Position d'Elementor sur les widgets et les conteneurs offre Default, Absolute and Fixed, avec un décalage horizontal et un vertical L'extension Master Addons ajoute Relative et Static, vous permet de définir les quatre côtés, ajoute un décalage From Center, laisse le type de position changer par appareil, et fonctionne également sur les sections et colonnes classiques Il n'inclut pas Fixed, donc utilisez le paramètre d'Elementor pour les éléments qui doivent rester à l'écran pendant le défilement.
Lorsque j'utilise le positionnement Absolu, à quoi est-il positionné « par rapport » ?
Un élément absolument positionné est placé à l'intérieur du parent le plus proche dont la position n'est pas statique Si aucun parent n'a de position définie, les décalages sont mesurés à partir d'un parent plus haut sur la page, et l'élément peut se retrouver dans un endroit inattendu Pour éviter cela, sélectionnez le conteneur ou la colonne qui contient l'élément et définissez d'abord son type de position sur Relatif.
Est-ce que cela fonctionnera correctement sur mobile et tablette ?
Oui. Type de position, les quatre décalages, De Centre et Z-Index acceptent chacun des valeurs distinctes pour le bureau, la tablette et le mobile Un élément placé à 100 px de la gauche sur le bureau peut tomber d'un écran de téléphone, alors passez à la tablette et aux vues mobiles et ajustez les chiffres là-bas Vous pouvez également définir Type de position sur Static sur mobile pour remettre l'élément dans la disposition normale.
Puis-je utiliser cela pour réaliser une section de forme unique ou sortir d'un conteneur ?
Oui. Réglez le conteneur sur Relatif, placez une image ou une forme à l'intérieur, définissez cet élément sur Absolute et donnez-lui un décalage négatif tel que Gauche : -50 px. L'élément est suspendu au-dessus du bord du conteneur, c'est ainsi que la plupart des modèles de héros et de cartes qui se chevauchent sont construits.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
