### position: relative

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

top, left, bottom, right avec positionnement relatif

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.

Exemple : positionnement relatif
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p id="yoda"> <img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> </div> </body> </html>
Fichier CSS : styles.css
div { margin: 20px; border: 1px solid black; padding: 10px; background-color: lightgrey; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: yellow; } #yoda { position: relative; left: 100px; background-color: orange; }

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

Exemple : positionnement relatif et perte de contenu
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p id="yoda"> <img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> </div> </body> </html>
Fichier CSS : styles.css
div { margin: 20px; border: 1px solid black; padding: 10px; background-color: lightgrey; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: yellow; } #yoda { position: relative; right: 150px; top: 110px; background-color: orange; }