Que l'on fasse du développement no-code via Webflow ou du développement traditionnel, à la fin, tous les sites internets fonctionnent avec les mêmes bases.
Il est donc primordial de les comprendre et de les connaître afin de créer des contenus qui fonctionnent sur tous les périphériques, et pour tous les utilsiateurs.
Aujourd'hui, attaquons le détail des position en CSS.
Position static
- Simple: Par défaut, tous les éléments sont en
position: static, ce qui signifie qu'ils s'affichent dans l'ordre habituel du document. - Technique: La
position: staticest le mode de positionnement standard. Les éléments sont positionnés selon le flux normal du document HTML, les uns après les autres, généralement de gauche à droite et de haut en bas. Les propriétéstop,right,bottom,left, etz-indexn'ont aucun effet sur ces éléments.
Position relative
- Simple:
position: relativeplace un élément par rapport à sa position normale sans le retirer du flux du document. - Technique: Lorsqu'un élément est défini avec
position: relative, il reste dans le flux du document, mais vous pouvez le décaler par rapport à sa position initiale en utilisanttop,right,bottom, ouleft. L'élément décalé peut chevaucher d'autres éléments, mais l'espace qu'il occupait initialement reste réservé dans le layout.
Position absolute
- Simple:
position: absolutepermet de placer un élément n'importe où dans la fenêtre ou un conteneur positionné, en le retirant du flux normal du document. - Technique: Un élément avec
position: absoluteest retiré du flux normal et peut être positionné par rapport à son ancêtre le plus proche non statique (c'est-à-direrelative,absolute, oufixed). Il est positionné à l'aide des propriétéstop,right,bottom, etleft. L'espace qu'il occupait dans le flux du document est supprimé, et il peut chevaucher d'autres éléments.
Position fixed
- Simple:
position: fixedancre un élément à l'écran, le rendant immobile lors du défilement de la page. - Technique: Un élément avec
position: fixedest retiré du flux normal du document et est positionné par rapport à la fenêtre du navigateur. Il reste fixe à l'écran même lorsque l'utilisateur fait défiler la page. Comme avecabsolute,top,right,bottom, etleftdéterminent sa position, mais par rapport à la fenêtre du navigateur.
Position sticky
- Simple:
position: stickypermet à un élément de se comporter comme un élémentrelativejusqu'à ce qu'il atteigne un certain seuil de défilement, moment auquel il devientfixed. - Technique: Un élément avec
position: stickyalterne entrerelativeetfixed, selon la position du scroll de l'utilisateur. Il reste dans le flux normal du document jusqu'à ce qu'il atteigne un point spécifié partop,right,bottom, ouleft, devenant alors fixe à cette position de l'écran. Il est principalement utilisé pour des en-têtes ou des éléments qui doivent rester visibles pendant le défilement.
Chaque méthode de positionnement offre des avantages uniques pour le contrôle et la mise en page des éléments dans des contextes différents, permettant aux développeurs web de créer des interfaces précises et dynamiques.
