9) Le positionnement css

Un des aspects les plus importants concernant la structure visuelle d’un site est le positionnement. C’est à dire la disposition visuelle des éléments dans l’espace de la page. On utilise pour cela des commandes dites de positionnement.

Précédent | 11/16 | Suivant

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;
}

Une fois un élément positionné en relative, absolute ou fixed, on dispose des déclaration top, bottom, left et right pour spécifier l’endroit où le bloc se place par rapport à son ancêtre positionné. Ici, "top:50px" signifie que l’élément se déplace de 50px vers le bas à partir du haut de de son ancêtre.

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 position fixe a longtemps été minoritaire parce qu’elle n’était pas reconnue par Internet Explorer 6, ce qui la rendait impraticable sans hack javascript complexe. Aujourd’hui, c’est l’ami du graphiste.

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“. "clear:left" ramène l’élément ciblé en dessous de tous les éléments en "float:left", "clear:right" fait la même chose pour les éléments ciblés en "float:left" et "clear:both" le fait pour les deux.

#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