position »Un autre outil pour positionner les éléments est la propriété position, utilisée conjointement avec les propriétés top/bottom et
left/right.
position et les propriétés associéesLa propriété position peut prendre les valeurs suivantes :
| position | static | relative | absolute | sticky | fixed | inherit |
La valeur par défaut, static, signifie que l'élément doit tout simplement être positionné à sa place normale dans le flux. Si on donne à l'élément une autre valeur (ou s'il hérite d'une autre valeur) on dit que l'élément est positionné. Les différents cas de positionnement sont étudiés individuellement plus bas.
Lorsqu'un élément est positionné, pour spécifier sa position, il faut utiliser une des propriétés left/right pour le positionnement horizontal
et une des propriétés top/bottom pour le positionnement vertical. Les valeurs que peuvent prendre ces propriétés sont données dans le tableau
suivant¹ :
| left, right, top, bottom | longueur | pourcentage | auto | inherit |
Ces propriétés n'on aucun effet sur un élément dont la position est statique.
¹ En cas d'utilisation redondante, ce sont les propriétés en gras qui priment, sauf si on leur donne la valeur auto.
Lorsqu'un élément est positionné relativement (position: relative;), il est le seul élément affecté par le positionnement : tout le reste de la page demeure
inchangé².
On utilise alors la propriété left pour dire de combien l'élément doit être décalé de la gauche (donc vers la doite) par rapport à sa position normale dans le flux. Si on
préfère, on peut plutôt utiliser la propriété right pour dire de combien l'élément doit être décalé de la droite
(donc vers la gauche). Si on utilise un pourcentage, c'est relativement à la largeur de l'élément parent.
De manière similaire, on utilise alors la propriété top pour dire de combien l'élément doit être décalé du haut (donc vers le bas) ou la propriété bottom
pour dire de combien l'élément doit être décalé du bas (donc vers le haut). Si on utilise un pourcentage, c'est relativement à la hauteur de l'élément parent.
² Dans le cas où il y a chevauchements avec des éléments flottants, reportez-vous à la simulation de la page suivante.
Lorsqu'un élément E est positionné absolument (position: absolute;), il est retiré du flux : le reste de la page sera donc disposé comme si l'élément n'existait pas.
L'élément est alors superposé à la page ainsi obtenue, ce qui veut dire qu'il pourra masquer d'autres éléments en tout ou en partie.
Le positionnement de E se fait par rapport à son plus proche ancêtre positionné A³.
On emploie la propriété left pour indiquer la distance vers la droite entre le bord
gauche de A et celui de E. On peut aussi employer la propriété right indiquer la distance vers la gauche entre le bord droit de A et celui de E.
Si on utilise un pourcentage, c'est relativement à la largeur de A. De
manière similaire, on emploie la propriété top pour indiquer la distance vers le bas entre le bord supérieur de
A et celui de E ou la propriété bottom pour indiquer la distance vers le haut entre le bord inférieur de A et celui de E Si on utilise un pourcentage,
c'est relativement à la hauteur de A.
Lorsqu'un élément E est positionné de manière fixe (position: fixed;), le comportement est similaire. La seule différence, c'est qu'il faut remplacer l'élément ancêtre
A par la zone d'affichage du document dans la fenêtre du navigateur (« viewport »). Ceci fait que l'élément E reste fixe sur l'écran lorsqu'on fait défiler la page web (d'où le nom).
³ Si E n'a pas d'ancêtre positionné, il faut prendre pour A l'élément body.
Le positionnement adhérent (position: sticky;) est une sorte d'hybride entre le positionnement statique et le positionnement fixe. Pour qu'il soit utile, il faut
qu'on puisse faire défiler la page web dans la fenêtre du navigateur. À titre d'exemple, si on utilise pour un élément le code
position: sticky;
bottom: 30px;
l'élément se comportera comme un élément positionné de manière statique jusqu'à ce que le défilement lui fasse atteindre une distance de 30px du bas de la fenêtre du navigateur. À partir de ce moment-là, il se comportera comme un élément à positionnement fixe avec la déclaration bottom: 30px;.
La valeur sticky est supportée par la grande majorité des navigateurs récents, mais malheureusement pas par Internet Explorer. Son support par Edge est à l'étude..