XIV. Positionnement et affichage avec les CSS

1. Pourquoi ?

Il existe 3 modes de positionnement CSS : relative, absolute, fixed. Chaque type a ses propres règles de positionnement et différentes boîtes peuvent utiliser différents schémas et interférer entre elles.

Il n'est pas peut-être pas inutile de rappeler le sens des mots padding et margin :

margin

padding

contenu...

Tout fonctionne par empilement de boites. Pour une boite quelconque margin désigne l'écart entre son bord (visible ou non) et le reste de la page (espace rose ci-dessus), tandis que padding désigne l'écart entre son bord (visible ou non) et son contenu (espace jaune ci-dessus).

2. Positionnement relatif

La position relative d'un élément est calculée et déterminée par rapport à la position de l'élément précédent dans le code HTML.

Dans ce cas :

« top = » sert à définir la distance entre le bord supérieur d'une zone et celui de la zone environnante.
« bottom = » sert à définir la distance entre le bord inférieur d'une zone et celui de la zone environnante.
« right = » sert à définir la distance entre le bord de droite d'une zone et celui de la zone environnante.
« left = » sert à définir la distance entre le bord de gauche d'une zone et celui de la zone environnante.

Les valeurs numériques et de pourcentage sont utilisées. Les valeurs négatives sont admises et il est alors possible de parvenir à faire chevaucher deux zones.

3. Positionnement absolu

Ce positionnement est déterminé par rapport au coin supérieur gauche du document. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

Résumé :

« top = » distance verticale entre le côté supérieur du navigateur et la partie supérieure de la boîte sélectionnée.
« left = » distance horizontale entre le côté gauche du navigateur et la partie gauche de la boîte sélectionnée.

4. Positionnement fixe

Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

Attention à ne pas confondre le positionnement absolu avec le positionnement fixe.

5. Exemples de positionnements relatif, absolu et fixe

css-demo-01.html

  <DIV STYLE="
     position:fixed;
     top:5em;
     left:3em;
     width:12em;
     height:12em;
     background:yellow;
  ">fixed fixed fixed fixed fixed fixed fixed fixed </DIV>
  <DIV STYLE="
     position:absolute;
     top:5em;
     left:3em;
     width:15em;
     height:10em;
     background:pink;
  ">absolute absolute absolute absolute absolute
    absolute absolute absolute </DIV>
  <DIV STYLE="
     position:relative;
     top:5em;
     left:3em;
     width:10em;
     height:15em;
     background:green;
  ">relative relative relative relative relative
    relative relative relative </DIV>

La partie positionnée relative le sera par rapport au dernier texte affiché.
Ce qui donnera ceci :

6. Positionnement flottant

En fonction de la valeur de la propriété float (left ou right) on positionne à gauche ou à droite une boîte par rapport au reste de la page. Cette boîte n'est plus dans le flux normal, le contenu de la boîte suivante viendra se placer juste à droite (ou à gauche en fonction de l'inverse de la valeur de la propriété float).

7. La propriété clear

Cette propriété très intéressante permet d'empêcher une boîte d'être adjacente à une autre en fonction du côté où elle se trouve par rapport à celle-ci (et de la valeur de la propriété clear : left, right ou both, qui désigne les côtés concernés par cette interdiction).
Voir la page sur les tableaux sans tableaux pour une application.

8. Exemple de positionnement flottant

css-demo-02.html

<DIV STYLE="float:right;border-style:solid;">droit n°1</DIV>
<DIV STYLE="float:right;border-style:solid;">droit n°2</DIV>
<DIV STYLE="float:left;border-style:solid;">gauche n°1</DIV>
<DIV STYLE="float:right;border-style:solid;">droit n°3</DIV>
<DIV STYLE="float:left;border-style:solid;">gauche n°2</DIV>
<DIV STYLE="float:right;border-style:solid;">droit n°4</DIV>
<DIV STYLE="float:left;border-style:solid;">gauche n°3</DIV>

Ce qui donne ceci :

Ou encore ceci, quand la fenêtre est trop étroite :

La propriété clear (avec les valeurs both, right et left) a pour effet de terminer une série de flottants et faire recommencer le flux sur la ligne suivante.

Voir la page sur les tableaux sans tableaux pour une application.

9. Affichage

La propriété display permet en fonction de la valeur qu'elle prend d'afficher de différentes manière une boîte (balise), un tableau, une liste, etc...
Valeurs possibles :

none : L'élément est masqué ;
block : transforme la boîte en type block;;
inline : transforme un type block en type inline.

Par défaut les boîtes (ou balises si vous préférez) sont positionnées les unes en dessous des autres (pour celle étant de type block).
Ainsi ce code

  <DIV>Un</DIV>
  <DIV>Deux</DIV>
  <DIV>Trois</DIV>

produira cet affichage

Deux

Trois

On peut changer la donne en modifiant le style grâce à la propriété display et une valeur inline.
Ainsi ce code

  <DIV STYLE="display:inline">Un</DIV>
  <DIV STYLE="display:inline">Deux</DIV>
  <DIV>Trois</DIV>

produira cet affichage

Deux

Trois

Il existe aussi des boîtes de type inline. C'est donc l'inverse qui se produit, et elles sont placées à la suite des autres. Si vous souhaitez les afficher verticalement (les unes en dessous des autres), il faut utiliser la propriété display et une valeur block.

Exemple : css-demo-03.html

<DIV>Un</DIV>
<DIV>Deux</DIV>
<DIV>Trois</DIV>

<HR>

<DIV STYLE="display:inline">Un</DIV>
<DIV STYLE="display:inline">Deux</DIV>
<DIV>Trois</DIV>

<HR>

<SPAN>Un</SPAN>
<SPAN>Deux</SPAN>
<SPAN>Trois</SPAN>

<HR>

<SPAN STYLE="display:block">Un</SPAN>
<SPAN STYLE="display:block">Deux</SPAN>
<SPAN>Trois</SPAN>

Ce qui donne ceci :

10. Des bonnes lectures

Dernière modification de cette page le vendredi 26 novembre 2004 à 09h59.