Initiation au positionnement CSS : 1.flux et position relative

• Profil : Expert
• Thème : Mise en page
• Technologie : CSS
• Auteur : Laurent Denis
• Mise à jour : 21/03/2003

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 :

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 :

• l'élément div ;
• les titres h1, h2, h3, h4, h5, h6 ;
• le paragraphe p ;
• Les listes et éléments de liste ul, ol, li, dl, dd ;
• Le bloc de citation blockquote ;
• Le texte pré-formaté pre ;
• L'adresse address.

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 :

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

• l'élément span ;
• le lien a ;
• L'image img ;
• Les emphases em et strong ;
• La citation q ;
• La citation cite ;
• L'élément code ;
• Le texte entré par l'utilisateur kbd ;
• L'exemple samp ;
• La variable var ;
• Les abréviations et acronymes abbr, acronym ;
• Le texte inséré ins ;
• Le texte supprimé del.

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.

Reportez-vous à notre article Boîtes bloc, boîtes en ligne et propriété display, pour en savoir plus sur l'utilisation de la proprieté display des boîtes bloc et en ligne…

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 :

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 :

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