CSS:Positionnement et affichage

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 :

Le sens des mots padding et margin

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).

[modifier]

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.

[modifier]

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.

[modifier]

Positonnement 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).

[modifier]

Remarque

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

[modifier]

Exemples de positionnements relatif, absolu et fixe

<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 :

[modifier]

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é flo

[modifier]