On vous explique toutes les positions sur Webflow. Pour enfin tout comprendre !

Maintenant ! Tout de suite ! C’est parti !

‍

Sommaire des différentes positions

• Static
• Relative
• Absolut
• Fixed
• Sticky

‍

Position Static

La position Static est la position par défaut. Il n’y a rien à comprendre à vrai dire !😅

Lorsque vous positionnez plusieurs éléments static comme du texte par exemple, ils s’empilent les uns sur les autres. Ils se basent sur la position de votre block.

Exemple :

Si votre block est en Flexbox centré vertical alors vos textes se positionnent au centre du block les uns sur les autres.

‍

Position Relative

La différence entre la position Static et Relative c’est la possibilité de bouger votre élément comme vous le souhaitez et de le positionner n’importe où ! Tout ça sans affecter les autres éléments de la page.

La position Relative est relative à elle même en gros !

Et pour finir vous avez la possibilité de régler le Z-index : c’est ce qui vous permet de contrôler quel élément est au dessus ou en dessous.

Un exemple en image pour mieux comprendre :

‍

‍

Vous avez pu le constater au début de la vidéo si il y a 2 éléments Static, au moment où vous décidez de changer la position de l’un deux en position relative, automatiquement l’élément en position relative va se placer au dessus.

‍

‍

Position Absolut

La position Absolut est relative au body et elle vous permet de positionner l’élément tout autour de celui ci mais pas seulement ! On vous explique restez concentré !

La position Absolut peut-être aussi relative à son block parent si le block parent est en position relative ! Oui je vous l’accorde ça fait un petit peu mal au crane !

La position Absolut est très pratique pour créer un bouton pour fermer une pop-up par exemple :

‍

‍

Comme vous avez pu le constater dans la vidéo au moment ou j’ai switché en position Absolut mon Link Block (avec image croix) a été se placer autour du container car celui ci était en position relative. Mais notre but étant d’avoir notre Link Block dans notre pop-up, nous avons donc switché la pop-up en position Relative, et hop le Link Block est venu se placer autour de celle ci !

‍

‍

Position Fixed

Si la position absolut est parfaite pour positionner un élément autour d’un autre élément, la position Fixed est un niveau au dessus !

Les éléments définis en position Fixed respectent le Viewport lui même. Le Viewport c’est la partie du browser (google chrome, safari, etc…) qui abrite tout ce qui est visible.

Je vous laisse regarder l’image c’est plus parlant !

Si vous utiliser Fixed pour positionner un élément, 2 choses se passent !

1. Comme la position absolut, votre élément ne fait plus parti de votre document il ne prend plus d’espace sur votre page, il est au dessus. Il est relatif au Viewport !
2. Vous pouvez le positionner exactement comme la position Absolut autour du Viewport. MAIS ! Imaginons que je place une image en bas à droite (en position Fixed) et que je scroll à travers ma page, l’image reste en bas à droite !

‍

‍

La position fixed est pratique pour des bannières publicitaires, les pop-up etc…

‍

Position Sticky

Je vais vous montrer 2 exemples pratiques pour vous expliquer cette position !

1. Une Nav bar Sticky
2. Une Side Bar Sticky

‍

1. Nav bar Sticky

Un Nav bar par défaut est en position Static. Mais passons la en position Sticky et comme vous pouvez le constater il ne se passe rien ! Super !

Mais si vous saisissez une valeur pour le haut, qui est de 0, votre Nav bar restera en haut du viewport ! Magique !

‍

Pour ceux qui n’auraient pas remarqué, en position Sticky votre nav bar prend toujours de l’espace sur l’écran contrairement à la position Fixed.

‍

2. Side bar Sticky

Si votre side bar est positionnée à l’intérieur de votre section en position Sticky avec la valeur haute de 0. (Votre block parent, la Section pour cette exemple, doit être défini en position Relative.)

Lorsque vous défilez vers le bas, votre side bar restera collée en haut de votre écran et elle se bloquera à la fin de son block parent !

Pour l’exemple cette fois ci vous n’avez qu’à regarder à droite de votre écran ! Car oui, depuis le début une side bar de la newsletter de Viby vous suit tandis que vous continuez de scroller. Vous comprenez ?

Allez je suis sympa je vous donne un autre exemple en image pour que vous compreniez bien !

‍

Voilà c’est à peu près tout ! Bravo si vous êtes arrivé jusque là !

Si vous avez d’autres questions en rapport aux positions n’hésitez pas à nous contactez ! Et mon conseil pour la fin serait de : Pratiquez, pratiquez et pratiquez !

‍