Le positionnement CSS permet de contrôler le placement des éléments HTML sur une page web. Il existe plusieurs types de propriétés de positionnement que vous pouvez utiliser :
1. Static : C’est le positionnement par défaut d’un élément HTML. Les éléments sont positionnés dans l’ordre normal du document, d’où le terme “statique”.
1. Relative : Avec ce type de positionnement, vous pouvez positionner un élément par rapport à sa position d’origine sans affecter le placement d’autres éléments. Vous pouvez utiliser les propriétés top, bottom, left et right pour déplacer l’élément dans n’importe quelle direction.
1. Absolute : C’est similaire au positionnement relatif, mais ici, l’élément est positionné par rapport à son parent le plus proche qui a une position relative ou absolue. Si un tel élément parent n’existe pas, l’élément est positionné par rapport au document HTML lui-même.
1. Fixed : Avec ce type de positionnement, l’élément reste fixe dans le même emplacement, même si le reste de la page est défilé.
1. Sticky : C’est un mélange des positionnements relative et fixed. L’élément est traité comme étant relatively positioned jusqu’à ce que son bloc conteneur dépasse un certain seuil de défilement, auquel point il est traité comme étant fixed.
Pour utiliser une propriété de positionnement, vous devez l’ajouter à votre feuille de style CSS pour l’élément que vous souhaitez positionner. Par exemple :
.div-exemple {
position: relative;
top: 20px;
left: 30px;
}
Ici, ‘.div-exemple’ représente la classe de l’élément que vous voulez positionner, ‘position: relative’ fixe le type de positionnement à relatif, et ‘top: 20px’ et ‘left: 30px’ déplacent l’élément de 20 pixels vers le bas et de 30 pixels vers la droite.
