Positionnement absolu, fixe et relatif

Positionnement absolu, fixe et relatif

La propriété CSS position permet de changer le comportement d'affichage des blocs. La valeur par défaut de cette propriété est static qui définit l'affichage normal. Mais nous nous pencherons plutôt vers les autres propriétés qui s'avèrent intéressantes :

• position:relative;
• position:absolute;
• position:fixed;

Positionnement relatif

On a dit que le flux définit l'ordre d'affichage par défaut des éléments. En positionnant de façon relative un élément, on ne le retire pas du flux. Il suit toujours la règle normale des positionnements. En mettant position:relative ; l'élément se déplace simplement par rapport à sa position normale.

Code CSS :

.relatif{
background-color: yellow;
border: 2px solid black;
position: relative;
left: 50px;
top:10px;
}

Code XHTML :

<p>

Ceci est un paragraphe normal.<span class="relatif"> Block relatif</span> Pourquoi ce texte "block relatif" est-il décalé? parce que c'est relatif;

</p>

Positionnement absolu

Avec le positionnement absolu, l'élément est détaché complètement du flux. Sa position n'est plus définie par rapport à la normale. Si la page est considérée comme une sorte de repère, l'élément sera placé par rapport à ce repère suivant les coordonnées définies. Les propriétés bottom, left, right ou top définiront ses positions comme suit :

• left : par rapport à la gauche de la page
• right : par rapport à la droite de la page
• top : par rapport au haut de la page
• bottom : par rapport au bas de la page

Le positionnement absolu nous donne alors une possibilité plus étendue au niveau du placement des blocks. Grosso modo, il nous permet de placer un block à n'importe quel endroit de la page que ce soit en haut à droite, ou en bas à gauche, ou etc.

Positionnement Fixed

La propriété position:fixed pourrait nous être avantageuse dans certains cas. Un petit rappel, comme d'habitude : quand nous avons étudié les fond, le background-attachment:fixed nous a permis de ne pas bouger le fond même si on fait défiler la page. L'idée du positionnement fixe est identique.

On place un élément sur la page, il y reste visible même si on fait défiler la page. Un cas très pratique est le cas des menus. Si on veut par exemple qu'un menu reste visible quand le visiteur parcourt la page, on le met en position fixe sur une partie de la page.

Cependant, il y a quand même un petit souci. Certains navigateurs non conformes aux standards CSS2 ne prennent pas en compte cette propriété. A tout problème il y a une solution. Mais ce thème ne sera pas abordé dans ce tutoriel. Si vous êtes confronté à ce problème, on vous laisse le soin de trouver la solution en question.

La dernière propriété c'est la position:inherit (CSS2) qui permet de dire que l'élément en question hérite de la propriété position de son parent. Si la position du parent est de type relatif, l'élément concerné sera aussi positionné de façon relative.