De quoi s'agit-il ?

Cette page d'exemple montre les quatre types de positionnement définis dans CSS 2.1 :

Toutes les déclarations CSS sont contenues dans la page, et il suffit de sélectionner « Voir la source de la page » dans votre navigateur pour voir comment c'est fait.

Ce code ne sera entièrement fonctionnel que dans les navigateurs compatibles avec CSS2 comme Opera dans ses versions récentes, Firefox, Safari et Internet Explorer 7. Les utilisateurs d'Internet Explorer 5.5 ou 6 pour Windows en percevront une version légèrement dégradée car ces navigateurs ne reconnaissent pas le positionnement fixe. Le rendu dans Internet Explorer 5 pour Mac est plutôt mauvais (mais réparable).

Le positionnement fixe et le positionnement absolu

L'en-tête (simili-logo et tête de page) et le pied de page (déclaration de copyright) ont un positionnement fixe, en haut et en bas de l'écran respectivement. Si vous faites défiler la page, vous verrez que le contenu et l'encadré défileront aussi, mais l'en-tête et le pied de page resteront en place, sauf si vous utilisez Internet Explorer 6 ou des versions plus anciennes.

Le simili-menu de navigation à gauche a une position fixe, il restera donc en place lorsque la page défilera. Par contre, l'encadré à droite est en position absolue et il défilera en même temps que le contenu.

Dans les versions anciennes d'Internet Explorer, le menu est en position absolue (via un commentaire conditionnel). Il bougera avec le défilement, mais c'est l'unique différence : un mode dégradé.

Le positionnement relatif

Pour montrer comment fonctionne le positionnement relatif, le bloc de citation suivant utilise un flottant et une position relative pour la lettrine. Avec le flottement à gauche, nous créons une lettrine et avec le positionnement relatif, nous pouvons la bouger en haut à gauche afin de créer un effet de détourage.

Le bloc conteneur où réside l'élément racine est choisi par l'agent d'utilisateur. (Il pourrait être lié à la zone de visualisation). Ce bloc conteneur est appelé le bloc conteneur initial.

Remarque : Cet exemple ne fonctionne pas dans Internet Explorer 5 pour Mac.

Les blocs conteneurs

Le plus important dans le positionnement absolu est de connaître ses blocs conteneurs. Dans cette page, l'encadré n'a pas d'ancêtre positionné, son bloc conteneur est donc le « bloc conteneur initial », c'est-à-dire la zone de visualisation.

Le menu à gauche est positionné, il devient donc le bloc conteneur des sous-éléments en position absolue. Les liens du menu contiennent des éléments span en position absolue, qui sont normalement cachés. Lorsque vous survolez un lien (ou y arrivez par tabulation), la description dans l'élément span apparaît sous le menu. (Cela ne fonctionne pas dans Internet Explorer 5/6).

Z-Index

Si vous examinez la source de la page, vous verrez que j'ai indiqué z-index:1 pour l'en-tête. Pourquoi donc ?

L'en-tête, l'encadré et le pied de page sont tous positionnés et apparaissent dans cet ordre dans le balisage. Ils ont le même bloc conteneur (la zone de visualisation), et ils appartiennent donc au même contexte d'empilement.

Sans la déclaration z-index de l'en-tête, l'encadré passerait devant elle au défilement de la page en bas. C'est parce que l'encadré apparaît après l'en-tête dans le balisage et qu'ils sont tous deux dans le même contexte d'empilement.

En augmentant sa valeur z-index, je peux placer l'en-tête devant l'encadré, de sorte que ce dernier glisse sous elle pendant le défilement. Remarquez que je n'ai pas eu besoin d'employer une valeur ridiculement élevée telle que z-index:100, il suffit qu'elle soit juste supérieure à zéro.

J'aurais obtenu un effet similaire ici en déclarant z-index:-1 pour l'encadré.

L'accessibilité

En regardant les règles CSS dans la source de la page, vous verrez que toutes les positions et dimensions importantes sont données en unités em. Cela veut dire que la mise en pages ne sera pas détruite si vous augmentez ou diminuez le corps du texte au moyen des fonctions intégrées de votre navigateur. En réalité, elle finira par céder lorsqu'il n'y aura plus assez de place pour la colonne centrale, mais elle devrait survivre à un nombre suffisant d'agrandissements pour être accessible à la majorité.

Certaines techniques démontrées dans cette page ne sont pas vraiment utilisables dans le monde réel. Internet Explorer 5.x et 6 ne reconnaissent pas le positionnement fixe, ce qui le disqualifie pour les sites Web publiques.

Il existe également des problèmes de convivialité : à cause de la non-reconnaissance du positionnement fixe par le navigateur jusqu'ici le plus utilisé, nous ne sommes pas habitués aux en-têtes, pieds de page et menus « collants ». La plupart des utilisateurs s'attendent probablement à ce que tout ce qui se trouve sur la page bouge lorsqu'elle défile vers le bas.

Néanmoins cela peut être envisagé pour des applications spécialisées (comme les intranets d'entreprises) où on sait que tout le monde aura un navigateur moderne.

Quoiqu'il en soit, l'objectif principal de la page est de montrer comment fonctionnent les concepts de positionnement dans CSS 2.1.

Au fait, le balisage passe la validation HTML 4.01 Strict et le style la validation CSS 2.1 (dont quatre avertissements que l'on peut ignorer sans risque).

© Copyright 2007 Digital Web Magazine