Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Le positionnement CSS dans le flux normal

Le positionnement CSS dans le flux normal

L'un des avantages des CSS est la possibilité de réaliser des positionnements au pixel prés assez minutieux. Ceci dispense les designers de recourir à la méthode des tableaux sans quadrillage qui s'avère plus laborieuse et moins efficace.

Dans le présent chapitre, on va se limiter au positionnement dans le flux normal (statique : static et relatif : relative). Pour bien entamer ce didacticiel, j'aimerais bien vous faire un petit rappel du rendu par défaut des éléments XHTML.

Le rendu visuel par défaut des éléments XHTML

Par défaut le navigateur positionne les éléments de la page en suivant un mode dit 'static' ("position: static;"). Tant qu'aucune règle CSS n'intervient pour dénaturer le flux naturel (flot naturel) comme la propriété CSS float (flottant) ou position avec une valeur 'fixed' ou 'absolute', Le navigateur lit le code XHTML du haut en bas, puis positionne les éléments selon leur ordre d'apparition dans le code source. Les blocs étant empilés l'un au-dessous de l'autre, et les éléments incorporés (éléments en-ligne remplacés et non remplacés) étant juxtaposés, l'un à côté de l'autre.

Dans un flux normal, chaque bloc suivant est placé en-dessous de son antécédent. Pour les éléments incorporés, leur ajout se fait de façon horizontale, en suivant le sens d'écriture. Si la propriété CSS direction a pour valeur 'ltr' (left to right : gauche à droite), l'ajout des nouveaux éléments en-ligne se fera à droite. Dans le cas contraire ("direction: rtl;"), les derniers éléments lus dans le flux, seront ajoutés à gauche (par exemple en langue arabe).

Donc retenez que le navigateur use de deux ingrédients pour positionner les éléments en un flux normal : l'ordre d'apparition des balises et leur type (bloc ou inline). L'ordre d'apparition sera utilisé pour déterminer quel contenu afficher en premier. Le type de la balise sera utilisé pour déterminer dans quel sens sera ajouté le contenu de la balise (bloc : verticalement, inline : horizontalement). On peut aussi ajouter la variable 'sens d'écriture' contenue dans la propriété CSS 'direction' qui détermine le sens de reproduction du contenu en-ligne (texte, images, liens, emphases etc.).

Dans son ensemble, le positionnement statique permet d'obtenir des résultats satisfaisants. Mais Parfois on cherche à réaliser des positionnements assez compliqués, par exemple placer une bannière à un endroit bien déterminé, ou bien mettre du texte sur une image etc. Ce genre de positionnement échappe complètement à la compétence du mode 'statique'. C'est pour cette raison que d'autres schémas de positionnement ont été mis au point : 'relative', 'absolute' et 'fixed'.

Dans le positionnement par défaut (static), on pourra jamais rencontrer deux ou plusieurs éléments superposés. Par exemple du texte sur une image. Car comme je viens de le mentionner, le navigateur ne pourra jamais reproduire un élément sur un autre en suivant un flux normal.

Introduction aux propriétés CSS de positionnement

Pour réaliser des positionnements assez minutieux, vous aurez à spécifier les propriétés de style suivantes :

Les propriétés CSS 'top' (haut), 'right' (droite), 'bottom' (bas) ou 'left' (gauche) ne sont pas supportées par le schéma de positionnement statique. C'est tout à fait logique, car le positionnement des éléments revient au navigateur.

Notez que vous pouvez mentionner une valeur de longueur absolue (px, cm, mm, pica, pt, in etc.). Une valeur relative "%" se rapportant à la largeur du bloc conteneur s'il s'agit des propriétés CSS 'left' ou 'right', ou bien à la hauteur du bloc conteneur pour les deux autres propriétés CSS 'bottom' et 'top'.

Les propriétés CSS top, right, bottom et left ont tous pour valeur initiale 'auto', qui incite le navigateur à calculer automatiquement le décalage horizontal (left, right) et/ou vertical (top, bottom) par rapport à sa position naturelle dans le bloc conteneur.

Schéma de positionnement statique (position : static)

Il correspond au positionnement par défaut. L'élément est placé en suivant le flux normal et sa position dépend des éléments frères supérieurs et inférieurs (en cas de blocs) ou bien latéraux (en cas d'éléments en-ligne). Pour cela il est totalement inutile d'associer les propriétés CSS top, right, bottom et left avec la propriété CSS position, si cette dernière est réglée sur 'static'.

Schéma de positionnement relatif (position : relative)

Le positionnement relatif ressemble énormément au positionnement statique, du fait que l'élément reste dans le flux normal. En fait le navigateur place tout d'abord l'élément selon le flux normal et en prenant en considération les éléments frères pour calculer sa position normale, puis il décale cet élément verticalement et/ou horizontalement à partir de sa position initiale selon les valeurs passées dans les propriétés de décalage.

Bien que l'élément soit décalé de sa position dans le flux normal, l'emplacement de la boîte suivante ne sera pas altéré par ce nouveau repositionnement, ce qui peut être source de chevauchement. Le positionnement relatif est intéressant dans le cas où on envisage de petits réajustements de la position normale en passant outre les propriétés CSS margin et padding, qui eux aussi peuvent être envisagées pour décaler relativement un élément horizontalement et/ou verticalement par rapport à sa position naturelle dans son bloc conteneur.

L'avantage avec le positionnement relatif, c'est que vous pouvez prévoir la position d'un élément dans le flux normal. Ce qui facilite davantage son repositionnement, contrairement aux deux autres modes 'absolute' et 'fixed' qui nécessitent généralement le recours à des logiciels (Dreamweaver, FrontPage etc.).

Pour comprendre davantage, un exemple s'impose

Positionnement du navigateur par défaut 'static'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position</title>
</head>
<body>
<p><img src="rap.gif" /></p>
<p>J'aime le RAP</p>
</body>
</html>

Rendu visuel schéma de positionnement statique (static)

Comme vous pouvez le remarquer, le navigateur va placer par défaut (position statique) le paragraphe au-dessous de l'image, car l'image apparaît avant le paragraphe. Bon, que faire pour mettre le texte à droite du graphique ? C'est facile on pourra recourir au positionnement absolu ou relatif. Mais si on utilise un bon sens, la solution relative est plus intéressante, car on connaît bien que le paragraphe apparaît en-dessous de l'image. Donc, il suffit de le décaler un peu vers le haut puis le déplacer encore vers la droite. Dans l'exemple ci-dessous, vous allez apprendre comment inscrire le texte à droite de l'image.

Positionnement relatif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position</title>
</head>
<body>
<p><img src="rap.gif" /></p>
<p style="position: relative; top : -80px; right: -100px;"> 
J'aime le RAP
</p>
</body>
</html>

Rendu visuel schéma de positionnement relatif (relative)

La règle CSS "position: relative; top: -80px; right: -100px;" peut être remplacée sans problème par "position: relative; bottom: 80px; left: 100px;". Je vais vous expliquer en commençant par la deuxième règle qui est plus facile. En mettant "bottom: 80px" vous ordonnez le navigateur de pousser le bord inférieur (bottom) du paragraphe de 80 pixels vers le haut. De même pour la règle "left: 100px;", le bord gauche du texte sera décale de 100 pixels vers la droite.

Pour les boîtes en position relative, les décalages sont déterminés par rapport aux bords externes de la boîte elle-même qui a reçu les propriétés CSS en question.

En mettant des valeurs négatives, les propriétés de décalages vont se voir attribuer le rôle contraire, par exemple la propriété bottom ne va plus décaler vers le haut, mais plutôt vers le bas. Et ainsi de suite avec toutes les autres propriétés de décalage. Par exemple "top: -80px" permettra de décaler le bord supérieur (top) du paragraphe de 80 pixels, n'ont pas vers le sens opposé (bottom), mais plutôt vers le même sens (haut).

En positionnement relatif, une propriété avec une valeur négative peut être substituée par une valeur positive mais avec la propriété inverse. Exemples :
top: -80px <==> bottom: 80px;
left: -80px <==> right: 80px;
Et plus généralement :
déplacement gauche = - déplacement droit
déplacement droit = - déplacement gauche
déplacement haut = - déplacement bas
déplacement bas = - déplacement haut

Ceci n'est pas valable pour les deux schémas de positionnement absolu et fixé, qu'on va voir dans le chapitre suivant, vu qu'on se réfère aux quatre bords du bloc conteneur. Donc on pourra pas remplacer par exemple :

"position: absolute; left: 30px; top: 30px;" par
"position: absolute; right: -30px; bottom: -30px"

Le premier positionnement se fera en fonction des deux bords supérieur et gauche du bloc conteneur (et non pas de l'élément lui-même). Le deuxième se fera en fonction des bords inférieur et droit. Mais dans tous les types de positionnement, les valeurs négatives servent uniquement à changer le sens de décalage.

En réglant les propriétés 'left' et 'right' ou bien 'top' et 'bottom' sur la valeur 'auto' (valeur initiale), la valeur calculée respectivement pour le décalage horizontal et vertical est égale à "0" (emplacement naturel de l'élément). Dans le cas où une propriété de décalage a la valeur automatique (auto), sa valeur calculée sera la valeur négative de la propriété qui lui est opposée. Exemples :
left: 100px ==> la propriété right a la valeur 'auto', donc sa valeur calculée sera : right: -100px
top: 20px ==> la propriété bottom a la valeur 'auto', donc sa valeur calculée sera : bottom: -20px
Ce raisonnement n'est valable que lorsque la propriété opposée a reçu une valeur autre qu'auto.

Dans le cas ou deux propriétés de décalage inconciliables (bottom et top ou left et right) ont reçu toutes les deux des valeurs autre qu'auto, l'une des deux valeurs sera ignorée (aura la valeur négative de la propriété CSS de décalage retenue) :

Concernant les propriétés CSS left et right, ça dépend du sens d'écriture. S'il est réglé sur 'ltr' (left to right : gauche à droite), la propriété left l'emportera, l'autre (right), aura pour valeur calulée celle négative de 'left'. Si le sens d'écriture est 'rtl', la valeur de la propriété CSS left sera ignorée (elle va être réajustée sur la valeur négative de right).

Pour les propriétés CSS bottom et top, c'est plus simple, car dans tous les cas, le navigateur ignore la propriété bottom en réajustant sa valeur calculée sur celle négative de top.

Exemples de positionnements statiques et relatifs

<img style="position: static; top: 100px;" src="" alt="" />

Dans cet exemple, la mention "position: static" n'est qu'une redondance superflue, puisque la valeur 'static' correspond au réglage par défaut. La mention "top: 100px" n'a pas de sens en schéma de positionnement statique.

<img style="position: relative; top: 100px;" src="" alt="" />

Le navigateur va tout d'abord inscrire l'élément dans un flux normal. Une fois sa position naturelle est déterminée, le navigateur va décaler le bord supérieur de l'image de 100 pixels vers le bas. Puisque nous sommes en présence d'un positionnement relatif, il est tout à fait possible d'user de la règle CSS "bottom: -100px;" qui signifie : 'décaler le bord inférieur de l'image de 100 pixels vers le bas'. Il faut juste se rappeler que les valeurs négatives permettent de changer le sens de décalage.

<img style="position: static; right: -100px; bottom: 20px;" src="" alt="" />

Bref, le bord inférieur de l'image sera décalé de 20 pixels vers le haut. Le bord droit sera repoussé de 100 pixels vers la droite. On pourra substituer "right: -100px" par "left: 100px" (décaler le bord gauche de 100 pixels vers la droite).

J'ai fait exprès de ne pas donner des exemples en pourcentages (%), car je vais en parler dans le chapitre suivant.

Bon, je peux pas vous faire comprendre tout, il faut un peu d'expérimentation. Pour cette raison je vous préconise de vous entrainer davantage en créant et exécutant vos propres exemples dans le navigateur

On reprend dans le chapitre suivant : le positionnement absolu (absolute) et fixé (fixed) avec les CSS.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau