La propriété position en CSS (Cascading Style Sheets)
La propriété position en CSS permet de positionner les éléments différemment du cours normal du document.
Il existe 5 principaux types de positionnement différents :
1/ Static
2/ Relative
3/ Absolute
4/ Fixed
5/ Sticky
1/ Static
Il s’agit de la valeur par défaut. L’élément suivra le cours normal du document.
Ici le second carré est positionné en « static ».
2/ Relative
Il s’agit d’un positionnement assez proche du « static« . L’élément est positionné tout d’abord dans le cours normal du document. Par la suite, il est possible de modifier son emplacement, avec la possibilité de le faire passer par dessus d’autres éléments par exemple. Le positionnement se faire alors à l’aider des propriétés Left, Right, Top et Bottom, par rapport à sa position initiale.
Ici le second carré est positionné en « relative ».
3/ Absolute
Contrairement au positionnement « relative« , cette valeur sort l’élément du cours normal du document. L’emplacement qui lui est normalement dédié, n’existe plus. Le positionnement se fait également avec les propriétés Left, Right, Top et Bottom, mais ces propriétés fonctionnent différemment : elles se font par rapport aux côtés de l’élément contenant notre élément. On parle alors de contexte de positionnement.
Par défaut, l’élément est positionné par rapport au bloc HTML, à moins de positionner son élément parent (tout sauf « static »).
Il est possible de modifier l’ordre d’empilement lorsque plusieurs éléments positionnés en absolu se chevauchent. Pour cela, on utilise la propriété z-index. L’élément avec le z-index le plus élevé, sera au dessus.
Ici le second carré est positionné en « absolute ».
4/ Fixed
Le positionnement « fixed » fonctionne exactement comme le positionnement « absolute« , mis à part que l’élément n’est pas figé par rapport à son parent, mais par rapport à la fenêtre du navigateur. Il restera ainsi toujours à la même place, même si la page défile. On retrouve ce type de positionnement pour les barres de menu/navigation notamment.
Ici on voit que la zone de navigation à gauche ne bouge pas même en « scrollant » sur le siteweb, elle est fixe.
5/ Sticky
Il s’agit d’un mélange entre les valeurs « relative » et « fixed ». L’élément est positionné dans un premier temps en position « relative« , mais jusqu’à un certain seuil que l’on définit. Au-delà de ce seuil, l’élément passe en positionnement « fixed ».
Ici on voit que l’encadré jaune est tout d’abord en position « relative »(2 premières images) puis passe en position « fixed » sur la 3ème image lorsque l’on scrolle vers le bas.
https://developer.mozilla.org/fr
https://www.w3schools.com
