position: relative;

Le positionnement relatif est considéré comme une variante du positionnement normal : il consiste à déplacer une boîte relativement à son positionnement normal.
On affecte à la propriété position la valeur relative.

La boîte est d'abord positionnée selon les règles du flux normal qui s'appliquent à son type (bloc ou en ligne). Elle est ensuite repositionnée relativement à sa position normale suivant la valeur de ses propriétés top, left, bottom et right.

Dans la figure ci-dessous, le positionnement normal est en gris.

Pour les 4 propriétés top, left, bottom et right, les valeurs possibles sont :

• une longeur (valeur négative possible),
• un pourcentage,
• auto (valeur par défaut)
• inherit

Les propriétés top et bottom ne sont pas utilisables en même temps car on aurait une double contrainte. Si c'est le cas malgré tout, la propriété bottom sera ignorée.

Les propriétés left et right ne sont pas utilisables en même temps car on aurait là aussi une double contrainte. Si c'est le cas malgré tout, la propriété right sera ignorée, sauf si la propriété direction a la valeur rtl.

La largeur et la hauteur de la boîte ne sont pas affectées par le positionnement relatif. On peut donc avoir des boîtes qui débordent de leur bloc conteneur.

Les boîtes qui suivent la boîte en positionnement relatif ne sont pas affectées. Elles restent à leur place comme si la boîte n'avait pas été déplacée. On peut donc avoir des chevauchements avec la boîte déplacée qui cache le contenu des boîtes qui la suivent.

Attention au positionnement qui cache du contenu : dans l'exemple suivant la boîte en positionnement relatif est déplacée vers la gauche et vers le bas. La partie gauche de la boîte sort de la fenêtre du navigateur. Le reste recouvre la boîte qui la suit dans le flux normal et qui n'a pas bougé.