Guide pour comprendre et utiliser la position absolue de Divi

L’attribut de poste absolu est l’un des quatre principaux types de postes disponibles dans la nouvelle option de poste Divi. Dans ce tutoriel, nous explorerons ce que cela signifie de donner une position absolue au projet dans Divi et comment l’utiliser lors de la conception du site Divi. Dans cet article, nous présenterons: les quatre types de positionnement de Divi aperçu de la position absolue comment « positionner » un élément de Divi avantages et inconvénients de l’utilisation d’une position absolue dans Divi exemples de cas d’utilisation avec des points de position avec des positions absolues: vérifier les boutons de positionnement absolu pour le flou à La même hauteur!
Divi aperçu des quatre types de positionnement la position absolue est l’une des quatre options de positionnement disponibles dans Divi. On trouvera ci – après un bref aperçu de ce qui suit. Statique (par défaut) Les éléments statiques ne sont pas \
Parents Les éléments placés relativement ressemblent un peu à des éléments statiques parce qu’ils suivent le flux normal de la page. La principale différence est que vous pouvez utiliser les attributs haut, bas, gauche et droite pour localiser les éléments relativement ancrés. De plus, contrairement aux éléments statiques, vous pouvez utiliser
Conteneur parent le plus proche. Le conteneur parent placé est tout conteneur auquel est attribuée une valeur de position qui n’est pas statique (par exemple relative, absolue, fixe). C’est pourquoi, dans la plupart des cas, si vous voulez placer un élément (tel qu’un module) absolument dans son conteneur parent (ou colonne), vous devez spécifier la position relative de la colonne avant de placer le Sous – module absolument. Sinon, le module emplacement absolu recherchera un emplacement plus élevé dans le document \/ page qui n’est pas un ancêtre statique le plus proche. Ainsi, dans Divi, par défaut, les sections et les lignes ont des positions relatives, de sorte que vous pouvez facilement placer les éléments dans ces éléments absolument. Voici une description de ce que fera le module de placement absolu si j’écrase la position de colonne par défaut de Divi et que je la définit à statique. Notez que puisque la colonne n’a plus de position, le module devient maintenant une ligne relative à la position (relative). Avantages et inconvénients de l’utilisation de l’emplacement absolu dans Divi l’emplacement absolu n’est qu’une des nombreuses façons de placer un projet. Il serait donc utile de couvrir certains des avantages et inconvénients de l’utilisation de positions absolues plutôt que d’autres. L’utilisation d’une position absolue présente certains avantages par rapport à d’autres attributs de positionnement tels que Transform – PAN ou edge:
Une bonne position absolue de l’outil de conception est déconnectée du flux normal de sorte que l’espace réel de l’élément n’affecte pas la conception placée. Bien qu’il puisse également s’agir d’un inconvénient, il peut être utile tant que vous voulez ajouter un projet à la conception établie sans avoir besoin d’un nettoyage supplémentaire (il peut être nécessaire d’ajouter un projet supplémentaire).
La santé suit le flux normal de documents (par exemple, placer un ensemble de formulaires au lieu d’un seul). De plus, comme les éléments absolument placés sortent du flux de documents, il est difficile de faire en sorte que le positionnement réponde à l’appareil mobile. En fait, de nombreux développeurs ont évité cette position: absolument, parce que la conception réactive pose des défis. Par conséquent, il est important d’utiliser des unités de longueur relative (p. ex., VW ou%) plutôt que des unités de longueur absolue (p. ex., Px) si nécessaire. Avec des points de localisation avec des positions absolues, les options de localisation intégrées dans le générateur Divi vous permettent de localiser facilement un projet en cliquant sur un point de localisation. Après avoir sélectionné un point de position, vous pouvez utiliser des décalages verticaux et horizontaux pour effectuer d’autres ajustements de position à partir de ce point de position. Par défaut, le point de position est défini dans le coin supérieur gauche. L’ajout de décalages verticaux et horizontaux à cet emplacement ajoute de l’espace supplémentaire en haut et à gauche. À partir du coin supérieur droit, le décalage vertical ajoute de l’espace d’en haut et le décalage horizontal ajoute de l’espace de droite. À partir du coin inférieur droit, le décalage vertical ajoute de l’espace du Bas et le décalage horizontal ajoute de l’espace à droite. À partir du coin inférieur gauche, le décalage vertical ajoute de l’espace du Bas et le décalage horizontal ajoute de l’espace du côté gauche. Modification de l’élément absolu de centrage chaque fois que l’option de position de centrage est sélectionnée, Divi utilise une combinaison d’attributs css pour s’assurer que l’élément est complètement centré, quelle que soit sa taille. Par exemple, si vous sélectionnez la position du centre gauche, Divi positionne e e
Les éléments sont les suivants: Voici l’apparence du CSS à l’arrière – plan. Position: absolument! Important
En haut: 50%;
En bas: voiture élévatrice;
Gauche: 0px;
Droite: automatique;
Transformation: translatey (- 50%); Haut: 50% pour le Haut de l’article, juste à 50% du haut du contenant. : translatey (- 50%) Convertit pour élever l’élément exactement à la moitié de sa hauteur. Cela vous donne un élément parfaitement positionné, quelle que soit sa hauteur. Assurez – vous de le savoir si vous voulez ajuster (ou décaler) davantage l’élément centré. Vous ne voulez pas faire d’erreur en utilisant l’option Transform Transform sans connaître les valeurs déjà utilisées. Pour cette raison, il est préférable d’utiliser l’attribut Margin dans Divi pour effectuer des changements mineurs au lieu de transformer – Translate, à moins que vous ne sachiez ce que vous faites. Utilisez l’option Transform translate pour placer plusieurs éléments absolus au centre si vous savez comment utiliser Transform: translate, il est en fait utile pour décaler les éléments centrés sans connaître la largeur de l’élément. Par exemple, supposons que vous ayez placé un module au centre vertical et horizontal d’une colonne dans Divi. Ça ressemble à ça. Si je convertit un élément comme suit, il n’y a pas de changement: convertissez (y): – 50% convertissez (X): – 50% C’est parce que Divi l’a fait automatiquement pour vous à l’arrière – plan. Une fois que vous comprenez cela, vous pouvez utiliser l’option Transform Transform pour effectuer des changements à partir de l’emplacement du point central. Si vous utilisez des unités de pourcentage de longueur, vous n’avez pas besoin de connaître la largeur ou la hauteur du module, car 100% est égal à la largeur ou à la hauteur du module. Par conséquent, si vous voulez ajouter quatre modules au centre de la colonne, vous pouvez utiliser
Sans objet. Vous devriez voir que les boutons en bas se déplacent directement sous le module Blurb, en plaçant chaque bouton à une position différente dans la colonne. En utilisant plusieurs sélections, sélectionnez chaque module de bouton et mettez à jour les paramètres d’élément suivants pour chaque bouton: position: position absolue: coin inférieur gauche Cela fait que chaque bouton se trouve entièrement dans le coin inférieur gauche de la colonne. Cependant, comme le bouton dépasse maintenant le flux normal d’éléments sur la page, vous remarquerez qu’il y a un certain chevauchement entre le bouton et le module Blurb dans la colonne la plus à gauche. Pour résoudre ce problème, il suffit de créer un espace réel pour le bouton en ajoutant un peu de remplissage dans la colonne comme suit: remplissage: 50 Px en bas Vous avez maintenant trois projets de premier plan, chacun avec la même position de bouton, bien que la quantité de contenu (ou la hauteur de Blurb) puisse changer. J’espère que cet article nous donnera une idée des propriétés de la position absolue et de son rôle dans Divi. Une fois que vous avez compris comment fonctionne l’emplacement, vous pouvez l’utiliser pour ajouter une variété d’éléments de conception précis pour élever votre site à un nouveau niveau. J’ai hâte d’entendre vos commentaires. Bonjour!