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.
> retour au sommaire
> voir la suite