outils et langages numériques

outils et langages numériques
le positionnement d'un élément

mis à jour en janvier 2026

Agir sur le positionnement d'un élément permet de le sortir du flux normal de la composition du document html, et de le faire se comporter différemment. Par exemple en plaçant un élément sur un autre ou en occupant toujours la même place dans la zone d'affichage du navigateur (exemple du menu fixé ou collant). Pour réaliser cette opération, la propriété position sera convoquée et complétée des valeurs static, relative, absolute, fixed ou sticky.
Voici les cinq types de positionnement existants⁥:

le positionnement statique or static

Par défaut, tous les éléments html sont positionnés de manière statique. Les éléments positionnés statiquement ne sont pas affectés par les propriétés top, bottom, left et right (étudiées ci après). Malgré son existence, ce positionnement est très rarement sollicité car il existe par défaut. La valeur convoquée pour ce type de positionnement sera static⁥:

côté html

<body>
<p>un premier paragraphe</p>
<p class="statique">un deuxième paragraphe</p>
<p class="statique gauche">un troisième paragraphe</p>
</body>

côté css

p {
background-color: #d5bac5;
}

.statique {
position: static; /* valeur par défaut */
}

.gauche {
left: 5em; /* la propriété ne s'applique pas sur un élément statique */
}

côté navigateur

un premier paragraphe

un deuxième paragraphe

un troisième paragraphe

En pratique⁥: testez l'exemple de positionnement statique, à manipuler en ligne…

le positionnement relatif or relative

Ce positionnement est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le flux normal de la mise en page, vous pouvez modifier sa position finale en complétant la propriété position et sa valeur relative par les propriétés top, bottom, left ou right qui décaleront l'élément par rapport à sa position de départ. Le reste du contenu ne sera pas ajusté pour combler l'espace laissé par l'élément et les éléments alentours ne seront pas affectés par son décalage⁥:

côté html

<body>
<p>un premier paragraphe</p>
<p class="relatif gauche">un deuxième paragraphe</p>
<p class="relatif">un troisième paragraphe</p>
</body>

côté css

p {
background-color: #d5bac5;
}

.relatif {
position: relative;
}

.gauche {
left: 5em; /* élément décalé de 5em vers la droite */
bottom: 0.6em; /* élément décalé de 0.6em vers le haut */
}

côté navigateur

un premier paragraphe

un deuxième paragraphe

un troisième paragraphe

En pratique⁥: testez l'exemple de positionnement relatif, à manipuler en ligne…

Pour rappel⁥: un exemple d'application vu lors de la mise en forme du texte et de l'usage de <sup> et <sub>…

le positionnement absolu or absolute

Un élément positionné avec position:absolute va être retiré du flux normal et sera positionné par rapport à son parent le plus proche lui aussi positionné (avec une valeur de position différente de static). Cela signifie et implique que l’espace initialement attribué à un élément au positionnement absolu va être occupé par les éléments suivants.
Si aucun parent positionné n’est trouvé, alors l’élément sera positionné par rapport à l’élément racine représentant la page en soi (body, html).
Les propriétés top, bottom, left ou right seront convoquées pour affiner le positionnement⁥:

côté html

<body>
<p>un premier paragraphe</p>
<p class="relatif">un deuxième <span class="absolu">paragraphe</span></p> /* span = création d'un conteneur inline */
<p>un troisième paragraphe</p>
</body>

côté css

p {
background-color: #d5bac5;
}

.relatif {
position: relative; /* ici, positionnement du parent */
}

.absolu {
position: absolute; /* l'élément sort du flux normal de son parent relatif */
top: 1.6em; /* il est décalé de 1.6em vers le bas */
left: 7em; /* puis il est décalé de 7em vers la droite */
background-color: #abc2cf; /* et change de couleur de fond */
}

côté navigateur

un premier paragraphe

un deuxième paragraphe

un troisième paragraphe

En pratique⁥: testez l'exemple de positionnement absolu, à manipuler en ligne…

le positionnement fixé or fixed

Un élément positionné avec position:fixed; va être retiré du flux de la page et l’espace qui lui était attribué selon le flux normal de cette page va également pouvoir être utilisé par d’autres éléments. Le positionnement fixe est très proche du positionnement absolu et la seule différence entre les deux est que l’élément en position:fixed; ne va plus être positionné par rapport à son parent le plus proche mais par rapport au viewport, c’est-à-dire par rapport à la fenêtre visible du terminal de consultation.
En lui combinant les propriétés top, bottom, left ou right la position finale, de cet élément fixé, sera affinée.

côté html

<body>
<h2 class="fixe">Le caniche</h2>
<p>La véritable ascendance de cette race de chien n'est pas claire et … ayant chacun au moins un caniche, bien qu'au XVIIIe siècle pas nécessairement le chasseur de canard.</p>
</body>

côté css

.fixe {
position: fixed;
bottom: 10px;
left: 5em;
padding: 5px;
background-color: #abc2cf;
}

côté navigateur

pour constater le positionnement fixé, scrollez le contenu textuel

En pratique⁥: testez l'exemple de positionnement fixé, à manipuler en ligne…

le positionnement collant or sticky

Le positionnement d'un élément avec position:sticky; est le fait de pouvoir maintenir la position d'un objet à un endroit précis dès que celui-ci devient hors de portée suite à une action par scroll. L'élément sera conforté dans son positionnement collant principalement par les propriétés top ou right (si un width est renseigné).
Dans l'exemple ci-dessous, lorsque l'utilisateur usera du scroll vertical, l'élément auquel sera attribué le sélecteur .collant restera à la position 0 de l'axe vertical⁥; ce qui donnera l'impression qu'il est collé en haut de la zone d'affichage.

côté html

<body>
<h2 class="collant">Le caniche</h2>
<p>La véritable ascendance de cette race de chien n'est pas claire et … ayant chacun au moins un caniche, bien qu'au XVIIIe siècle pas nécessairement le chasseur de canard.</p>
</body>

côté css

.collant {
position: sticky;
top: 0; /* au scroll vertical, l'élément <h2> sera collé en haut de la zone d'affichage */
background-color: #abc2cf;
padding: 5px;
}

côté navigateur

pour constater le positionnement collant, scrollez le contenu textuel

En pratique⁥: testez l'exemple de positionnement collant, à manipuler en ligne…