Positionner les éléments dans la page
Nous avons vu comment personnaliser le comportement visuel des éléments dans une page web, mais ceci reste un peu sommaire. Les éléments s’empilent les uns à la suite des autres, ce qui est plutôt plat en terme de graphisme.
Le positionnement est la méthode de déclaration css qui permet modifier la page et ce fameux ordre des blocs.
Rappel : seuls les éléments de type “block“ peuvent être positionnés. Il y a 4 types de positionnement et une bidouille.
Par défaut : le flux
Un élément positionné en “static“ se place sous son élément frère - ou soeur - qui le précède dans le code et pousse vers le bas l’élément frère - ou soeur - suivant. C’est le comportement par défaut des éléments de type bloc.
#element {
position:static;
}Un peu bizarre : le relatif
Un élément positionné en “relative“ reste dans le flux, mais peut bouger de cette position sans que cela n’affecte l’endroit qu’il occupe, ni la position des éléments frère – ou soeur – qui le suivent.
Le positionnement en relatif est surtout utilisé parce qu’il est un positionnement, ce qui permettra de contrôler le comportement des éléments placés en absolu.
#element {
position:relative;
left:-10px;
}Le king dangereux : l’absolu
Un élément positionné en “absolute“ quitte le flux et se positionne relativement à son ancêtre positionné.
Les éléments suivants l’ignorent, ce qui peut provoquer des chevauchements foireux si on ne pense pas bien le positionnement des éléments.
Un élément en absolu adapte sa taille par rapport à son contenu, raison pour laquelle on fixe souvent sa taille.
#element {
position:absolute;
Left:0;
top:50px;
}Le frère mal aimé : le fixe
Un élément positionné en “fixed“ quitte le flux. Il se positionne relativement à la fenêtre du navigateur.
#element {
position:fixed;
Left:0;
top:50px;
}La bidouille : le float
Un élément recevant un comportement en float rest lié à sa position dans le flux. Les éléments inline qui le suivent vont respecter son positionnement, mais pas les éléments de type block, qui vont l’ignorer. On peut forcer les éléments suivants à se placer sous lui en leur donnant la propriété “clear“ en left, right ou both.
#element {
float:right;
width:200px;
}Documentation
Le net est le meilleur endroit pour trouver de l’information sur les technologies du net.
Sur Openweb
Sur Alsacreations
Specification du W3C sur Yoyodesign