Initiation au positionnement CSS : 1.flux et position relative

  • Profil : Expert
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur : Laurent Denis
  • Mise à jour : 02/07/2008

En bref

Par défaut, les navigateurs affichent les boîtes issues du document html dans l’ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.

Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d'un texte, il procède verticalement, commençant en « haut » de l'écran pour aller jusqu'en « bas », et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.

Boîte de type bloc en flux normal

Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur :

En HTML :

<p class="jaune">Une boîte jaune</p>
<p class="verte">Une boîte verte</p>

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 :

L'un au dessus de l'autre, la boîte bloc rectangulaire jaune et la boîte rectangulaire verte

Le navigateur traite successivement les deux éléments rencontrés. Comme il s'agit d'éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l'élément conteneur, c'est à dire ici le bloc conteneur initial.

Les principaux éléments créant des boîtes bloc sont :

Boîte de type en-ligne

Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur :

En HTML :

<p>
  <span class="jaune">Une boîte jaune</span>
  <span class="verte">Une boîte verte</span>
</p>

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2 :

De gauche à droite, la boîte rectangulaire jaune et la boîte rectangulaire verte

Les principaux éléments créant des boîtes en ligne sont :

Pour résumer le flux normal : c'est un traitement linéaire du contenu de la page. L'alignement des boîtes bloc est vertical ; l'alignement des éléments en-ligne dans les boîtes bloc est horizontal.

La position relative

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Soit par exemple un positionnement relatif indice qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune :

En HTML :

<p>
  Lorem
  <span class="jaune">
    boîte en position relative
  </span>
  ipsum dolor.
</p>

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  background-color: #ffff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3 :

Le texte de la boîte jaune se décale de 5 pixels vers le haut par rapport au reste du paragraphe

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  left: 3em;
  background-color: #ffff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 4 :

Le texte de la boîte jaune se décale de 5 pixels en haut et de 3em à droite : il déborde sur le texte qui suit

Nous aborderons le second type de positionnement CSS dans initiation au positionnement CSS : 2.position float.

Une question, une remarque ? Écrivez à l'auteur.

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par l'APINC et propulsé par SPIP.