Que l’on fasse du développement no-code via Webflow ou du développement traditionnel, à la fin, tous les sites internet fonctionnent avec les mêmes bases. Il est donc primordial de les comprendre et de les maîtriser afin de créer des contenus qui fonctionnent sur tous les périphériques et pour tous les utilisateurs.
Aujourd’hui, attaquons le détail des différentes positions 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 : position: static est 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és top, right, bottom, left et z-index n’ont aucun effet sur ces éléments.
Position relative
Simple : position: relative place 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 utilisant top, right, bottom ou left. L’élément décalé peut chevaucher d’autres éléments, mais l’espace qu’il occupait initialement reste réservé.
Position absolute
Simple : position: absolute permet de placer un élément n’importe où dans la fenêtre ou dans un conteneur positionné, en le retirant du flux normal du document.
Technique : Un élément avec position: absolute est retiré du flux normal et peut être positionné par rapport à son ancêtre le plus proche non statique (c’est-à-dire relative, absolute ou fixed). Il est positionné à l’aide des propriétés top, right, bottom et left. L’espace qu’il occupait dans le flux est supprimé, et il peut chevaucher d’autres éléments.
Position fixed
Simple : position: fixed ancre un élément à l’écran, le rendant immobile lors du défilement.
Technique : Un élément avec position: fixed est retiré du flux normal et positionné par rapport à la fenêtre du navigateur. Il reste fixe même lorsque l’utilisateur fait défiler la page. Comme avec absolute, top, right, bottom et left déterminent sa position, mais par rapport au viewport.
Position sticky
Simple : position: sticky permet à un élément de se comporter comme un élément relative jusqu’à ce qu’il atteigne un seuil de défilement, moment auquel il devient fixed.
Technique : Un élément avec position: sticky alterne entre relative et fixed selon la position de scroll de l’utilisateur. Il reste dans le flux normal jusqu’à atteindre un point défini par top, right, bottom ou left, puis devient fixe à cette position. C’est principalement utilisé pour les en-têtes ou les éléments qui doivent rester visibles pendant le défilement.
Chaque méthode de positionnement offre des avantages uniques pour le contrôle de la mise en page dans différents contextes, permettant aux développeurs web de créer des interfaces précises et dynamiques.
.png)
