Guide de survie du positionnement CSS

Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte:

• les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3);
• celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir);
• les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre);
• les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.);
• les bugs éventuels des navigateurs (ou de certains navigateurs).

Comment s'y retrouver? Déjà, en ayant une bonne connaissance des principaux types de positionnement en CSS. Ensuite, avec quelques conseils dispensés ici à titre indicatif, et je l'espère sans prétention.

Ressources en français sur le positionnement CSS

Voici votre to-read list. On se retrouve demain, le temps que vous lisiez ces très bons articles. Allez, disons au moins les deux premiers, sinon vous n'allez rien comprendre à la suite de l'article.

• Alsacréations: Initiation au positionnement CSS (partie 1).
• Alsacréations: Initiation au positionnement CSS (partie 2).
• Openweb: 1. flux et position relative.
• Openweb: 2. position float.
• Openweb: 3. position absolue et fixe.

C'est bon, on y est? Alors on enchaine sur la galerie des horreurs. :)

Erreurs de débutant à ne pas commettre

Penser qu'il faut utiliser la propriété position à tort et à travers

C'est un réflexe logique (quoi de mieux pour positionner un élément que la propriété «position»?), mais source d'erreur. En effet, et même si ça peut surprendre, l’essentiel du positionnement CSS se fait sans même qu'on ait besoin d'utiliser la propriété position.

Tout positionner en absolu (pas bien)

Le positionnement absolu est à la fois très puissant et très limité. On ne l'utilisera que ponctuellement, et en sachant précisément ce que l'on fait (voir les détails plus bas).

Tout positionner en relatif (pas bien non plus)

Le positionnement relatif est très utile mais ne s'utilise que ponctuellement, pour décaler légèrement un élément par rapport à sa position normale. On ne l'utilise pas, par exemple, pour placer deux blocs côte-à-côte. Si vous vous retrouvez à écrire des position: relative; top: -291px;, vous utilisez probablement le positionnement relatif à mauvais escient.

Voilà pour les choses à ne pas faire. Maintenant, quels sont les bons réflexes à avoir?

Quel type de positionnement utiliser en priorité?

Voici, classés par ordre d’importance décroissante, les types de positionnement que vous serez le plus amené à utiliser:

1. Garder les éléments dans le flux, et jouer sur les marges, padding, etc.

   Ça peut paraitre une évidence, mais mieux vaut le rappeler: pour la plupart des éléments d'une page, on utilisera le positionnement en flux de l'élément.

   On exploitera simplement le fait que les éléments de type bloc (div, paragraphes, titres, etc.) se placent naturellement les uns sous les autres, et prennent automatiquement toute la largeur disponible. Pour écarter les éléments entre eux ou au contraire les rapprocher, on utilisera les marges (margin) et le padding.

2. Modifier le mode de rendu avec la propriété display

   Une des techniques les plus efficaces en positionnement CSS c’est de donner à un élément un mode de rendu différent de celui par défaut. Typiquement, il s'agit de passer un élément de type en-ligne en rendu de type bloc (display: block), ou à l'inverse des éléments de type bloc en rendu de type en-ligne (display: inline). Cela permet par exemple de faire un menu horizontal à partir du code HTML d'une liste à puces.

   À l'avenir, ou dès à présent si on n’a pas besoin d’assurer la compatibilité avec IE7, on pourra utiliser display avec des valeurs intéressantes comme inline-block (déjà supporté par la majorité des navigateurs), table et table-cell, etc. Mais attention: chaque mode de rendu a ses spécificités, ses avantages et ses limites! Il faudra donc bien les connaitre pour choisir en connaissance de cause.

   Sur les valeurs de display supportées à partir d’IE8, on pourra lire: Le modèle tabulaire en CSS et Mise en page avec display inline-block (Alsacréations).

3. Pour placer des blocs côte-à-côte: propriété float

   La plupart du temps, pour créer des «colonnes» — ou simplement placer deux blocs côte-à-côte — on utilisera le positionnement flottant. Attention, le positionnement flottant a quelques caractéristiques pas toujours simples à comprendre, notamment le dépassement des flottants.

   Pour se familiariser un peu plus avec l’utilisation de float, on peut lire par exemple le tutoriel Un design fluide avec trois «colonnes», grâce au positionnement flottant. La plupart de nos gabarits CSS de mise en page utilisent aussi ce positionnement.

4. Centrage des éléments

   Vient toujours le moment où l'on veut centrer des contenus ou tout un site. Pour centrer horizontalement un texte, on utilisera text-align. Pour centrer horizontalement un bloc, on utilisera la technique des marges automatiques. Enfin, le centrage vertical est le point compliqué. À l'heure actuelle, la solution la plus compatible pour centrer verticalement un bloc est d'utiliser un tableau de mise en page. À l'avenir, on pourra utiliser display: table-cell sur un bloc conteneur pour centrer son contenu avec vertical-align: middle. (Là encore, si vous n’assurez pas la compatibilité IE7, vous pouvez utiliser display: table-cell sans hésitation.)

   Pour des explications plus fournies, on peut lire: Centrer les éléments ou un site web en CSS et Un bloc centré horizontalement et verticalement dans la page.

5. Positionnement absolu

   Pour commencer, on n'utilisera le positionnement absolu que dans les conditions suivantes: 1) si on sait comment faire pour positionner un élément en absolu par rapport à son parent ou ancêtre positionné (si cela ne vous dit rien, relire les articles indiqué en ressources!); 2) si on a une idée précise des conséquences du positionnement absolu (risque de chevauchement des contenus); 3) si on sait à l'avance quels sont les contenus qui seront ainsi positionnés, et si ces contenus ne risquent pas de prendre de l'ampleur et ainsi de déborder de l'espace défini.

   Une fois ces précautions bien intégrées, on pourra utiliser le positionnement absolu de manière efficace pour quelques éléments de nos pages web.

6. Positionnement relatif

   Pour l'essentiel, le positionnement relatif a deux usages concrets: 1) créer un nouveau référent pour les éléments enfants et descendants positionnés en absolu et 2) décaler légèrement (de quelques pixels, pas plus) un élément par rapport à sa position normale, pour réaliser un effet visuel. Toute autre utilisation, sans être impossible ou forcément incorrecte, est risquée.

7. Positionnement fixe

   À n'utiliser qu'en connaissance de cause, avec beaucoup de précautions et en testant sur différentes configurations (et surtout différentes résolutions d'écran). On n'utilise que très rarement le positionnement fixe.

Nous y sommes. Avec un peu de chance, vous y voyez maintenant plus clair. Si ce n'est malheureusement pas le cas, je vous invite à lire ou relire les articles indiqués comme ressources, et à mener vos propres essais pour vous familiariser avec le comportement des différentes propriétés. Courage!