Comprendre et utiliser la position relative dans Divi

La propriété de position relative est peut-être le plus mystérieux des types de position. Cependant, une fois que nous comprenons son fonctionnement, nous pouvons l'utiliser à notre avantage lors de la conception d'un site dans Divi. Ce que nous découvrons peut vous surprendre.

Dans cet article, nous couvrirons :

• Un aperçu des quatre types de positionnement de Divi
• Comment la position relative « positionne » un élément dans Divi
• 5 raisons d'utiliser la position relative dans Divi
• Position relative par rapport à la marge
• Position relative vs. Transformer la traduction

Vérifiez-le!

Présentation des quatre types de positionnement de Divi

La position relative est l'un des quatre types 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). Dans Divi, lorsque nous choisissons la position par défaut d'un module, nous choisissons 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. Nous pouvons 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. Nous pouvons 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 nous fassions 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 moyens d’utiliser « position:sticky » dans Divi.

Comment la position relative « positionne » un élément dans Divi

Comme mentionné dans l'aperçu, le type de position relative est similaire à la « position » statique car l'élément reste dans le flux normal du document (le HTML sur la page). La vraie différence est qu'une fois que nous avons affecté un élément avec la position relative, il a maintenant de nouvelles options disponibles pour positionner l'élément. Ces options incluent les propriétés top, bottom, left et right ainsi que la propriété Z Index.

Dans Divi, ces options de position supplémentaires se trouvent sous le groupe d'options de position une fois la position relative sélectionnée.

Utilisation de décalages avec la position relative

Les valeurs Offset Origin et Offset fonctionneront ensemble pour positionner notre élément n'importe où dans le conteneur parent. Dans cet exemple, nous avons un module qui a une position relative, un décalage en haut à gauche, un décalage vertical de 25px et un décalage horizontal de 25px. Remarquez comment les valeurs de décalage éloigneront l'élément de l'origine du décalage horizontalement et/ou verticalement.

Voici le même module avec les mêmes décalages mais avec une origine de décalage en haut à droite.

Voici le même module avec les mêmes décalages et une origine de décalage en bas à droite.

Et voici le même module avec les mêmes décalages et une origine de décalage en bas à gauche.

Pas de surprises d'espacement

Avec un positionnement relatif, l'espace réel de l'élément reste à sa place d'origine après que l'élément a été déplacé à l'aide des décalages (haut, bas, gauche, droite). La nouvelle position de l'élément ne bouge ni n'affecte l'espacement du reste des éléments sur la page. Il plane essentiellement sur les autres éléments comme un esprit qui a quitté son corps.

Raisons d'utiliser la position relative

#1 Pour rendre un conteneur parent pour les éléments à positionnement absolu

C'est probablement l'application la plus populaire du type de position relative. Puisque tout élément positionné de manière absolue est relatif à l'ancêtre positionné le plus proche, nous pouvons choisir de faire de l'un de ses ancêtres un élément positionné simplement en lui donnant une position relative (la position statique par défaut n'est pas techniquement « positionnée »). Cela maintient le flux de documents en place (comme statique) et nous permet de choisir un conteneur pour les éléments absolus.

#2 Pour déplacer des éléments sans affecter les autres éléments de la page.

Avec la position relative, nous pouvons utiliser les décalages pour aligner les éléments sans affecter les autres éléments. Et avec Divi, nous pouvons profiter de l'interface utilisateur déplaçable pour positionner les éléments visuellement en temps réel.

#3 Utiliser l'index Z pour chevaucher d'autres éléments

Par défaut, les éléments statiques ne peuvent pas être réorganisés sur l'axe z, sauf si la position relative est donnée. Une fois en position relative, l'élément restera positionné dans le flux normal du document. Seulement maintenant, nous avons la possibilité de tirer parti de l'indexation Z pour placer les éléments dans un ordre particulier lorsqu'ils se chevauchent.

#4 Pour éviter d'utiliser la marge négative à des fins de position

Le positionnement relatif laissera derrière lui l'espace de sa position d'origine. Cependant, avec une marge négative, le contenu et son espace d'origine sont tous deux déplacés. Par exemple, si nous ajoutons une marge supérieure négative à une ligne dans Divi afin que la ligne chevauche la ligne au-dessus, toutes les lignes/contenus remonteront avec. Cela laisse un peu de désordre à nettoyer qui pourrait être évité en utilisant à la place les décalages de position relative.

Voici une illustration de ce qui se passe lorsque nous utilisons une marge supérieure négative pour déplacer un module vers le haut. Remarquez comment le reste des éléments ci-dessous sont mis en place.

Si on donne au même module une position relative, on peut utiliser le décalage vertical pour amener le module vers le haut sans que cela n'affecte le reste de l'espacement sur la page.

Bien que j'aie souvent utilisé une marge négative pour positionner des éléments dans Divi, ce n'est probablement pas une bonne idée si nous pouvons utiliser le positionnement relatif à la place. La marge se rapporte au module de boîte de l'élément, elle est donc vraiment destinée à ajouter de l'espacement dans et autour de l'élément lui-même, pas tant pour positionner l'élément en décalage par rapport à son conteneur parent qu'avec un positionnement relatif.

Position relative vs Traduire Transformer

La position relative est vraiment similaire à l'utilisation de transform translate pour positionner des éléments sur une page. Ils déplacent tous les deux l'élément tout en laissant l'espace réel à sa place d'origine et sans affecter les autres éléments de la page.

La traduction est meilleure pour l'animation et les transitions (comme les effets de survol)

Cependant, il semble que la traduction soit la meilleure pour l'animation et les transitions (comme les effets de survol) car elle fournit des transitions plus rapides et plus fluides. L'utilisation des décalages en haut, en bas, à gauche et à droite pour animer ou faire la transition d'un élément relatif pourrait être plus saccadée et pourrait faire travailler notre navigateur plus fort qu'il n'en a besoin.

Les unités de longueur relative répondent différemment

Si nous utilisons des unités de longueur relative (comme % ou vw) pour une conception réactive, celles-ci fonctionneront différemment avec la position relative et la translation de transformation.

Un module Divi avec une position relative et un décalage horizontal de 50% déplacera le module horizontalement d'une quantité égale à 50% de la largeur du conteneur parent (ou colonne).

Un module Divi avec une translation de transformation (axe X) de 50% déplacera le module horizontalement d'une quantité égale à 50% de la largeur du module lui-même.

Combinaison de la position relative et de la conversion de transformation en éléments centraux

Comme nous venons de le voir, la position relative est relative au parent et la propriété transform translate est relative à l'élément lui-même. Pour cette raison, nous pouvons utiliser les deux en combinaison pour positionner les éléments comme nous le souhaitons. On peut même utiliser cette technique pour centrer des éléments dans leur contenant.

Par exemple, nous pouvons utiliser le décalage horizontal de la position relative pour positionner le module à droite exactement à 50 % de la largeur de la colonne.

Utilisez ensuite la propriété translate pour déplacer le module de 50 % (de la largeur du module) vers la gauche. Cela garantira que le module reste au centre de la colonne, quelle que soit la largeur du module.

Dernières pensées

Si vous êtes comme moi avant d'écrire cet article, vous n'avez probablement pas très bien compris ou utilisé le type de position relative. L'aspect peut-être le plus surprenant de cette position relative est son impact (ou pas) sur le reste de la conception de la page. Non seulement cela fonctionne en tandem avec les éléments absolus, mais cela fonctionne également bien avec la traduction de transformation pour positionner les éléments à l'endroit parfait.

Quelle a été votre expérience avec le type de position relative?

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

À votre santé!