Initiation au positionnement <acronym>CSS</acronym> : 1.flux et position relative
2003-03-21
2003-03-21
Laurent
Denis
laurent.denis@openweb.eu.org
Cet article est sous licence Creative Commons Attribution-ShareAlike.
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.
expert
mise_en_page
css
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 :
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 :
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 :
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 :
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.