Positionnement absolu et relatif

La propriété position permet de sortir un élément du flux normal. Elle admet trois valeurs que nous allons étudier tour à tour.

// Position absolue

La position absolue sert à placer l'élément par rapport au bord de la page.
Les propriétés CSS qui indiquent la place du cadre sont top (haut), bottom (bas), left (gauche), right (droite).

Nous allons placer un bloc de texte à 30px du bord superieur et 50px du bord de gauche.

1  <div>
2    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
   magna. Curabitur sagittis porttitor risus. Maecenas tempus.
3  </div>

1  div
2    {
3      position: absolute;
4      top: 30px;
5      left: 50px;
6    }

Le résultat est visible sur la page d'exemple n°8

// Position fixe

La position fixe est assez semblable à la position absolue, exeption faite que l'élément concerné n'est pas sensible au défilement de la page.

Reprenons l'exemple précédant, mais avec la feuille de style.

1  div
2    {
3      position: fixed;
4      width: 250px;
5      left: 50px;
6    }

Vous pouvez voir le résultat sur la page d'exemple n°9

// Position relative

La position relative concerne uniquement les éléments inline, ils sont décalés par rapport à leur position sur la ligne.
Par exemple :

1  <p>
2    Lorem ipsum dolor sit amet, <span>consectetuer adipiscing</span>
   elit. Fusce magna. Curabitur sagittis porttitor risus.
3  </p>

1  span
2    {
3      position: relative;
4      bottom: 5px;
5      left: 5px;
6      background-color: yellow;
7    }

Le résultat est :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus. Maecenas tempus. Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl.

// L'ordre des calques

Un calque est simplement un autre nom pour un <div> avec une position absolue ou fixe.

Parfois les différents élément peuvent se chevaucher, il faut donc choisir l'élément qui doit passer devant l'autre.

On utilise alors la propriété z-index, sa valeur sera numérique, le calque n°1 sera en arrière-plan.

Vous pouvez tester cette propriété sur la page d'exemple n°10.

N'hésitez pas à poser vos questions sur le forum