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: ...