Un guide pour comprendre et utiliser la position absolue de Divi

La propriété de position absolue est l'un des quatre principaux types de position disponibles dans les nouvelles options de position de Divi. Dans ce tutoriel, nous allons explorer ce que signifie donner à un élément une position absolue dans Divi et comment vous pouvez l'utiliser à votre avantage lors de la conception de sites Divi.

Dans cet article, nous couvrirons :

• Un aperçu des quatre types de positionnement de Divi
• Comment la position absolue « positionne » un élément dans Divi
• Avantages et inconvénients de l'utilisation de la position absolue dans Divi
• Utilisation des points de localisation avec la position absolue
• Exemple de cas d'utilisation : Positionnement des boutons absolument pour des éléments de présentation de même hauteur

Vérifiez-le!

Présentation des quatre types de positionnement de Divi

La position absolue est l'une des quatre options de position disponibles dans Divi. Voici un bref aperçu de chacun ci-dessous.

Statique (par défaut)

Techniquement, les éléments statiques ne sont pas « positionnés » car ils restent dans le flux ou l'ordre normal des éléments sur la page, et ils ne répondent pas aux propriétés haut, droite, bas et gauche comme les autres éléments positionnés (c'est pourquoi aucun les décalages sont disponibles dans Divi pour les éléments en position statique/par défaut). La position statique est la position par défaut pour tout élément CSS. Dans Divi, lorsque vous choisissez la position par défaut pour un module, vous choisissez la position statique. Il convient également de mentionner que certains éléments de Divi (comme les lignes et les sections) auront une position relative par défaut (pas la position statique).

Relatif

Les éléments relativement positionnés sont un peu comme des éléments statiques en ce sens qu'ils suivent le flux normal de la page. La principale différence est que les éléments relativement positionnés peuvent être positionnés à l'aide des propriétés top, bottom, left et right. De plus, contrairement aux éléments statiques, ils peuvent également être positionnés à l'aide de la propriété Z Index.

Absolu

Un élément positionné de manière absolue sort du flux de documents normal et, par conséquent, aucun espace réel n'est créé sur la page pour l'élément. Vous pouvez le considérer comme un élément flottant au-dessus des autres éléments de la page qui occupent de l'espace réel. Il sera positionné par rapport au conteneur parent positionné le plus proche.

Fixé

Comme la position absolue, les éléments avec la position fixe sortiront du flux normal de la page et n'auront pas d'espace réel créé dans la page. le différence clé entre absolu et fixe est que la position fixe est relative à la fenêtre du navigateur ou à la fenêtre d'affichage. En d'autres termes, peu importe où se trouve l'élément dans le flux normal de la page, une fois qu'on lui a attribué une position fixe, sa position sera désormais directement liée à la fenêtre du navigateur. Vous pouvez utiliser les propriétés top, bottom, left et right pour positionner l'élément dans la fenêtre. Étant donné que les éléments fixes survoleront souvent derrière ou devant d'autres éléments de la page, l'index Z aidera à ordonner les éléments fixes au-dessus des autres.

REMARQUE : Il existe un autre type de positionnement en CSS appelé collant. Un élément positionné de manière collante se comporte comme un élément positionné relativement jusqu'à ce que vous fassiez défiler jusqu'à son conteneur (à un moment déterminé par la valeur supérieure). Ensuite, l'élément devient fixe (ou bloqué) jusqu'à ce que l'utilisateur défile jusqu'à la fin du conteneur. Cependant, la position collante peut être un peu imprévisible car d'autres facteurs peuvent inhiber la fonctionnalité. Dans Divi, l'option collante n'est pas disponible dans les options intégrées pour cette raison. Cependant, il existe des façons d’utiliser position:sticky dans Divi.

Comment la Position Absolue « positionne » un élément dans Divi

Comme mentionné dans la vue d'ensemble, un élément positionné de manière absolue sera positionné par rapport au conteneur parent positionné le plus proche. Un conteneur parent positionné est tout conteneur auquel est attribuée une valeur de position autre que statique (c'est-à-dire relative, absolue, fixe). C'est pourquoi dans la plupart des cas, si vous souhaitez positionner un élément (comme un module) de manière absolue dans son conteneur (ou colonne) parent, vous souhaiterez donner à la colonne une position relative avant de positionner le module enfant de manière absolue. Sinon, le module en position absolue cherchera plus haut dans le document/la page l'ancêtre le plus proche avec une position autre que statique. Pour cette raison, dans Divi, les sections et les lignes ont toutes deux la position relative par défaut afin que vous puissiez facilement positionner des éléments absolument dans ces éléments.

Voici une illustration de ce que fera le module à positionnement absolu si je remplace la position par défaut de Divi pour une colonne et la définit sur statique. Notez que puisque la colonne n'a plus de position, le module deviendra désormais relatif à la ligne qui a une position (relative).

Avantages et inconvénients de l'utilisation de la position absolue dans Divi

La position absolue n'est qu'une des différentes méthodes de positionnement des éléments. Par conséquent, il serait utile de couvrir certains des avantages et des inconvénients de l'utilisation de la position absolue au lieu d'autres.

Avantages

Voici quelques avantages de l'utilisation de la position absolue par rapport à d'autres propriétés de positionnement telles que Transform Translate ou Margins :

Bon outil de conception

Position absolue Sort du flux normal de sorte que l'espace réel de l'élément n'affecte pas la conception une fois le positionnement effectué. Bien que cela puisse également être un inconvénient, cela peut être bénéfique chaque fois que vous souhaitez ajouter des éléments à une conception déjà établie sans aucun nettoyage supplémentaire pouvant être nécessaire pour ajouter de l'espace supplémentaire à la mise en page. En d'autres termes, vous pouvez ajouter des éléments à la page sans avoir à déplacer des éléments existants pour le faire.

Une bonne alternative aux flotteurs et aux marges

Avec la position absolue, vous n'avez pas besoin de dépendre d'éléments flottants ou d'utiliser des marges pour accomplir un positionnement similaire. Bien qu'il ne s'agisse pas d'une option native de Divi, ceux qui sont familiers avec CSS savent que vous pouvez utiliser des flottants pour positionner des éléments à droite ou à gauche, ce qui peut être un peu bogué et imprévisible dans certains cas. Il en va de même pour l'utilisation des marges pour positionner les éléments. Parfois, il est difficile de prédire les valeurs de marge exactes pour positionner un élément juste sans laisser d'espacement inutile. L'utilisation d'une position absolue peut être une bonne alternative de « positionnement précis » à la fois pour les flottants et les marges.

Bonne prise en charge du navigateur

La propriété de position absolue est largement prise en charge sur tous les principaux navigateurs, vous pouvez donc généralement être sûr qu'elle ne perturbera pas les autres navigateurs de manière inattendue.

Désavantages

Voici quelques inconvénients à prendre en compte lors de l'utilisation de la position absolue :

Risque d'isolement

Étant donné que les éléments positionnés de manière absolue sortent du flux de documents normal, il peut être difficile d'ajouter des éléments supplémentaires à proximité. Ils deviennent isolés des autres éléments de la page. Par exemple, normalement dans Divi, si vous souhaitez ajouter un bouton sous un module de texte, vous pouvez simplement ajouter un module et il résidera automatiquement sous le module de texte. Mais si le module de texte était positionné de manière absolue, vous devrez également positionner le module de bouton de manière absolue, puis utiliser les propriétés haut, bas, gauche et droite pour positionner le bouton sous le module de texte. Cependant, il pourrait être plus facile de positionner une colonne (le conteneur de module parent) de manière absolue afin que tous les modules de la colonne puissent suivre le flux de documents normal (comme le positionnement d'un groupe de modules au lieu d'un).

Moins réactif

De plus, étant donné que les éléments positionnés de manière absolue sortent du flux de documents, il peut être difficile de rendre le positionnement réactif pour les appareils mobiles. En fait, beaucoup de développeurs évitent la position:absolue en raison des défis liés à la conception réactive. Par conséquent, il est important d'utiliser des unités de longueur relative (comme vw ou %) au lieu d'unités de longueur absolue (comme px) si nécessaire.

Utilisation des points de localisation avec la position absolue

Les options de localisation de position intégrées au générateur Divi permettent de positionner très facilement les éléments en cliquant simplement sur un point de localisation. Une fois le point d'emplacement sélectionné, vous pouvez utiliser les décalages verticaux et horizontaux pour effectuer des ajustements de position supplémentaires à partir de ce point d'emplacement.

Par défaut, le point de localisation sera placé en haut à gauche. Ainsi, l'ajout des décalages verticaux et horizontaux à cet emplacement ajoutera un espacement supplémentaire à partir du haut et de la gauche.

À partir de l'emplacement du coin supérieur droit, le décalage vertical ajoutera de l'espace à partir du haut et le décalage horizontal ajoutera de l'espace à droite.

À partir de l'emplacement du coin inférieur droit, le décalage vertical ajoutera de l'espace à partir du bas et le décalage horizontal ajoutera de l'espace à droite.

À partir de l'emplacement du coin inférieur gauche, le décalage vertical ajoutera de l'espace à partir du bas et le décalage horizontal ajoutera de l'espace à partir de la gauche.

Faire des ajustements aux éléments absolus centrés

Chaque fois que vous sélectionnez une option d'emplacement avec une position centrée, Divi utilise une combinaison de propriétés CSS pour s'assurer que l'élément est parfaitement centré, quelle que soit sa taille. Par exemple, si vous sélectionnez l'emplacement de position centré à gauche, Divi positionnera l'élément comme suit :

Voici à quoi ressemble le CSS dans le backend.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Le top:50% est là pour positionner le haut de l'élément exactement à 50% du haut de son contenant. Le transform:translateY(-50%) est là pour amener l'élément vers le haut d'exactement la moitié de sa propre hauteur. Cela vous donne un élément parfaitement placé quelle que soit la hauteur.

Ceci est important à savoir au cas où vous voudriez apporter des ajustements supplémentaires (ou des décalages) à un élément en position centrée. Vous ne voulez pas commettre l'erreur d'utiliser l'option transform translate sans connaître les valeurs déjà utilisées. Pour cette raison, il serait préférable de faire de plus petits ajustements en utilisant la propriété margin dans Divi au lieu de transformer translate à moins que vous ne compreniez ce que vous faites.

Utilisation de l'option Transform Translate pour positionner plusieurs éléments absolus pour l'emplacement centré

Si vous comprenez comment transform:translate est utilisé, cela peut en fait être très utile pour décaler des éléments centrés sans avoir à connaître la largeur de l'élément.

Par exemple, disons que vous positionnez un module à centrer à la fois verticalement et horizontalement avec une colonne dans Divi. Cela ressemblerait à ceci.

Si j'ai donné à l'élément une traduction de transformation comme suit, rien ne changera :

• Transformer la traduction (Y) : -50%
• Transformer la traduction (X) : -50%

En effet, Divi le fait déjà automatiquement dans le backend pour vous. Sachant cela, vous pouvez effectuer des ajustements à partir de l'emplacement du point central en utilisant l'option de conversion de transformation. Et si vous utilisez l'unité de pourcentage de longueur, vous n'avez pas besoin de connaître la largeur ou la hauteur du module pour effectuer des ajustements puisque 100 % équivaut à la largeur ou à la hauteur du module. Ainsi, si vous souhaitez ajouter quatre modules au centre de la colonne, vous pouvez utiliser les options de transformation pour décaler chacun des modules positionnés de manière absolue.

Pour ce faire, vous devez créer quatre modules et leur donner à tous une position absolue avec un emplacement centré verticalement et horizontalement.

Ensuite, utilisez les options de traduction de transformation pour ajuster la position des modules en fonction du pourcentage de la largeur et de la hauteur du module en conséquence. Par exemple, donner à un module une valeur d'axe Y de translation de transformation de -100 % amènera le module vers le haut de la hauteur exacte du module. Donner au module une valeur sur l'axe X de -100 % déplacera le module vers la gauche de la largeur exacte du module. Cela peut être un excellent moyen de combiner des éléments qui sont absolument centrés.

Exemple de cas d'utilisation : Positionnement des boutons absolument pour des éléments de présentation de même hauteur

Une application pratique de l'utilisation de la position absolue dans Divi consiste à donner à un bouton une position absolue à l'intérieur d'une colonne afin que le bouton reste en bas de la colonne même si la quantité (ou la hauteur) du contenu au-dessus peut changer. Cela peut être un excellent moyen de garder la conception cohérente lorsque vous présentez des éléments sur votre page.

Voici comment procéder.

Tout d'abord, ajoutez une ligne à une colonne à la section.

Ajoutez ensuite un module de présentation à la colonne.

Ensuite, ajoutez un module de boutons sous le module de présentation.

Ouvrez les paramètres de ligne et dupliquez la colonne deux fois pour obtenir un total de trois colonnes identiques chacune avec le même module de présentation et de bouton.

Ensuite, allez dans les paramètres de ligne et sélectionnez l'option pour égaliser les hauteurs de colonne. Cela garantira que les colonnes s'ajusteront à la hauteur de la colonne avec la plus grande hauteur (ou le plus de contenu).

Mettez maintenant à jour le contenu du corps de chacun des modules de présentation de sorte que la quantité de contenu diffère avec chaque colonne. Vous devriez voir que le bouton ci-dessous se déplacera vers la position directement sous le module de présentation, plaçant chacun des boutons dans une position différente dans la colonne.

À l'aide de la sélection multiple, sélectionnez chacun des modules de boutons et mettez à jour les paramètres d'élément suivants pour chacun des boutons :

• Position : Absolu
• Emplacement : En bas à gauche

Cela positionnera chacun des boutons absolument en bas à gauche de la colonne. Mais comme les boutons sont maintenant en dehors du flux normal des éléments sur la page, vous remarquerez qu'il y a un certain chevauchement avec le bouton et le module de présentation dans la colonne la plus à gauche. Pour résoudre ce problème, nous devons simplement créer un espace réel pour le bouton en ajoutant un peu de remplissage à la colonne comme suit :

• Rembourrage : 50 pixels en bas

Vous avez maintenant trois éléments en vedette avec un emplacement de bouton cohérent pour chacun, même si la quantité de contenu (ou la hauteur du texte de présentation) peut changer.

Dernières pensées

J'espère que cet article a fait la lumière sur la propriété de position absolue et sur la puissance de son utilisation dans Divi. Une fois que vous avez compris le fonctionnement du poste, vous pouvez l'utiliser pour ajouter toutes sortes d'éléments de conception précis qui feront passer votre site Web au niveau supérieur.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!