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 | 6/13 | 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

La déclaration float permet de forcer les contenus de type inline (en gros, le texte et les images) à contourner un élément à qui on associe la déclaration. Ceci permet d’incruster une illustration dans du texte et de faire en sorte que le texte "coule" à sa droite ou sa gauche.
Cette déclaration très ancienne a beaucoup servi pour réaliser des mises en page, parce qu’elle permettait de placer des bloc les uns à côté des autres.
C’était en fait un bricolage qui n’a plus de raison d’être maintenant que les déclaration flex et grid existent et sont beaucoup plus simples et robustes dans leur utilisation.

Un élément recevant un comportement en float reste 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;
}

Le sauveur des graphistes : flex
CSS3 a apporté une nouvelle possibilité puissante : flex. Ce positionnement se déclare avec l’attribut "display" :

#truc {
   display:flex;
}

et par défaut, produit une disposition à l’horizontale des éléments contenus dans l’élément déclaré en flex, c’est à dire ce qui était autrefois obtenu avec float, mais sans les désavantages de float. Les éléments sont toujours considérés commé étant dans le flux, par exemple.
Mais ce n’est pas tout : les éléments enfants d’un élément en flex peuvent recevoir des tas d’autres options de présentation :
- leur alignement horizontal peut être géré : alignés à gauche, au centre ou à droite
- leur taille peut être gérée
- ils peuvent être réordonnés (le premier élément peut être placé en deuxième position par exemple)
- ils peuvent être alignés ou disposés tous à la même taille
Etc.

C’est donc un excellent outil de mise en page que les graphistes attendaient depuis des années.
Voir la documentation détaillée sur css tricks

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