Le positionnement CSS permet de placer un element exactement ou l'on veut dans la page. Avec les flottants (cf. la lecon 13), le positionnement offre de nombreuses possibilites pour concevoir une presentation complexe et precise.
Cette lecon abordera les sujets suivants :
Imaginons la fenetre du navigateur comme un systeme de coordonnees :
Le principe du positionnement CSS fait que l'on peut positionner une boite n'importe ou dans le systeme de coordonnees.
Supposons que nous voulions positionner un titre. D'apres le modele des boites (cf. la lecon 9), le titre apparaitra de cette facon:
Si nous voulons positionner ce titre a 100px du haut et a 200px de la gauche du document, notre code CSS pourrait etre le suivant :
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Le resultat sera le suivant :
Comme vous pouvez le constater, le positionnement CSS est une technique de placement tres precise des elements. Elle est beaucoup plus facile que l'utilisation de tables, d'images transparentes ou autres choses.
Un element en position absolu ne recoit aucune place dans le document. Cela signifie qu'il ne laisse aucun espace vide apres qu'il est positionne.
On place un element en position absolue en fixant la valeur de la propriete position a "absolute".
On peut alors utiliser les proprietes left, right, top et bottom
pour placer la boite.
Comme exemple de positionnement absolu, nous avons choisi de placer quatre boites a chaque coin du document :
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
On place un element en position relative en fixant la valeur de la propriete position a "relative".
La difference entre position absolue et position relative tient a la facon dont la position est calculee.
Pour un element en position relative, elle est calculee d'apres sa position originale dans le document. Cela signifie que l'on deplace l'element vers la droite, la gauche, le haut ou le bas. Ainsi, l'element obtient toujours un espace dans le document apres qu'il est positionne.
Comme exemple de positionnement relatif, nous pouvons positionner trois photos relativement a leur position originale dans la page. Remarquez les espaces vides laisses par elles a leurs positions originales dans le document :
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Dans les deux lecons precedentes, vous avez appris a faire flotter et a positionner les elements. Ces deux methodes offrent beaucoup de possibilites de construction des pages sans utiliser les methodes demodees avec des tables et des images transparentes de HTML. Utilisez CSS a la place : c'est plus precis, plus avantageux et aussi plus facile d'entretien.