Team-Masters.com
Que du Gratuit pour Webmasters
Le positionnement relatif en CSS
Le fonctionnement du positionnement relatif est, de prime abord, similaire au positionnement dans le flux normal. Les éléments vont s’afficher d’abord dans l’ordre du flux normal puis ceux que l’on aura activés et forcés à avoir un positionnement relatif vont se décaler de leur position initiale dans le flux et venir se positionner selon les règles CSS qu’on leur aura dicté. Le positionnement relatif est donc une variante du positionnement dans le flux courant. Pour placer un élément selon un positionnement relatif, on l’active en CSS par la déclaration "position : relative".
L’élément activé ainsi est alors dit « positionné ».
Après l’avoir activé en positionnement relatif, on peut attribuer à l’élément concerné (ex. un paragraphe) des propriétés de position comme top, left, right ou bottom auxquelles on aura spécifié des valeurs en pixels, em, ou pourcentage. On décale ainsi l’élément positionné en le sortant du flux normal, la place qu’il occupait normalement dans le flux lui restant toutefois réservée, c’est à dire qu’aucun élément suivant ou adjacent ne vient prendre la place qu’il a laissé quand il était dans le flux normal. Mais pour illustrer notre exemple, voyons le code HTML suivant :
<div>
<p id="first">Un premier paragraphe de texte normal</p>
<p id="second">Un deuxième paragraphe avec des éléments <strong>en ligne</strong></p>
<p id="third">Un troisième paragraphe frère des deux précédents.</p>
</div>Avec pour code CSS ce qui suit :
div {
width: 480px;
background: green;
padding-top: 5px;
padding-bottom: 5px;
}
p#first {
width: 150px;
background: yellow;
margin-left: 2em;
padding: 2px;
}
p#second {
width: 175px;
background: orange;
margin-left: 1em;
padding: 0.5em;
}
p#third {
width: 160px;
background: white;
margin-left: 1em;
padding: 0.5em;
}Ce qui donne, conformément au positionnement dans le flux courant :
Un premier paragraphe de texte normal
Un deuxième paragraphe avec des éléments en ligne
Un troisième paragraphe frère des deux précédents.
Appliquons maintenant la déclaration position : relative au second paragraphe pour le décaler de sa position dans le flux normal et fixons lui des valeurs pour le pousser vers la gauche de 30px et vers le haut de 20px. voici le code CSS :
p#second {
position: relative;
left: 30px;
bottom: 25px;
width: 175px;
background: orange;
margin-left: 1em;
padding: 0.5em;
}Ce qui donne, oh là là, le second paragraphe qui a bougé et s’est même positionné au-dessus du premier (il s’est décalé du flux normal) :
Un premier paragraphe de texte normal
Un deuxième paragraphe avec des éléments en ligne
Un troisième paragraphe frère des deux précédents.
En positionnement relatif, on voit qu’il est possible de décaler des éléments en les sortant du flux normal au point qu’ils peuvent prendre place par-dessus leurs frères. Mais attention, à l’aide de cette technique, on ne manipule que des décalages, chaque élément restant dépendant de ses frères. Remarquez que le troisième paragraphe n’a pas pris la place laissé libre par le second quand celui-ci s’est positionné en relatif.
En résumé, en positionnement relatif, les éléments se positionnent d’abord comme s’ils étaient dans le flux normal, ensuite, ceux qui sont positionnés en relatif à l’aide de la déclaration "position : relative" prennent leur place finale en décalage de leur position théorique dans le flux normal (en fonction des valeurs attibuées à left, top, right ou bottom).
Poussons encore l’exemple en modifiant le code CSS du troisième paragraphe :
p#third {
position: relative;
left: 5em;
top: 3em;
width: 160px;
background: white;
margin-left: 1em;
padding: 0.5em;
border: 2px double pink;
}Ce qui donne alors :
Un premier paragraphe de texte normal
Un deuxième paragraphe avec des éléments en ligne
Un troisième paragraphe frère des deux précédents.
Les deuxième et troisième paragraphes étant positionnés en relatif, on voit ici qu’en fonction des règles de positionnement CSS, le dernier paragraphe "sort" même du conteneur div. En réalité, il se place au-dessus de lui, car n’oublions pas qu’en positionnement relatif, la place initiale que le bloc occupait dans le flux normal lui reste réservée : c’est bien ce que nous observons ici puisqu’on peut constater qu’il existe un espace dans le conteneur div après le premier paragraphe et qui correspond aux positions des 2ème et 3ème paragraphes comme s’ils étaient dans le flux normal.
En conclusion, le positionnement en relatif permet de manipuler des décalages entre blocs frères. C’est un mode de positionnement qui n’est vraiment nécessaire que pour des décalages avec superposition. Mais quel intérêt ? On verra tout de suite que ce mode de positionnement présente un intérêt pour des positionnements en absolu ou fixe.
17 février 2005
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
