Bienvenue sur le site de Jef

La position relative

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement.
Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Position relative avec décalage vers le haut

Soit par exemple un positionnement relatif qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune :
Code CSS:

.jaune { position: relative;
         bottom: 5px;
         background-color:yellow; }

Code html:

<p>
  Lorem
  <span class="jaune">
    boîte en position relative
  </span>
  ipsum dolor.
</p>

Le résultat peut être observé ci-dessous:

Lorem boîte en position relative ipsum dolor.

Position relative avec décalage vers le haut et à droite

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :
Code CSS:

.jaune { position: relative;
         bottom: 5px;
         left: 3em;
         background-color:yellow; }

Code html:

<p>
  Lorem
  <span class="jaune">
    boîte en position relative
  </span>
  ipsum dolor.
</p>

Le résultat peut être observé ci-dessous:

Lorem boîte en position relative ipsum dolor.

---

retour haut de page