Sommaire

Le positionnement Positionnement

Les balises comme le div peuvent être positionnées n’importe où dans la page. Il existe en CSS des propriétés left, top, right et bottom qui permettent d’indiquer la distance qu’il y a entre le div et le côté gauche par exemple. left top right bottom

Il est donc possible d’écrire en CSS :

left: 200px;

ce qui signifie que le bloc qui a ce style sera à 200 pixels à gauche. Mais à gauche de quoi ? Il faut combiner les propriétés top, right, bottom et left avec la propriété position qui doit toujours être précisée avant le côté top, right... position

La propriété position permet d’indiquer justement par rapport à quoi vont être calculées les distances. Les valeurs possibles sont static, relative, absolute et fixed.

Par défaut, la valeur de position est static. Avec cette valeur, le bloc ne peut pas être positionné librement. Il suit simplement le flux et s’affiche en fonction des éléments qui le précèdent.

La valeur relative permet de se situer par rapport à la position actuelle du bloc, c’est-à-dire que les 200 pixels à gauche seront 200 pixels par rapport au bloc contenant le bloc qui a ce style.

Il y a ensuite la valeur absolute. Ici la référence pour positionner le bloc est la page. Le CSS ressemblera à :

position: absolute; 
left: ...