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
emetstrong; - 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.
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 :
2. position absolue et fixe
La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ?
Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour :
- placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;
- créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.
Le fonctionnement de la position absolue
Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :
- une boîte elle-même positionnée (position relative ou absolue) ;
- le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.
Définissons un conteneur verte en position relative :
.verte {
position: relative;
background-color: #00ff00;
width: 15em;
}
Et un positionnement absolu jaune :
.jaune {
position: absolute;
top: 1em;
right: 1em;
background-color: #ffff00;
}
Et appliquons ces styles :
<div class="verte">
<p>
…
</p>
<p class="jaune">
Boîte jaune en position absolue
</p>
</div>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1
Ménager un espace pour la boîte en position absolue
Inévitablement, la boîte en position absolue recouvre le contenu de notre paragraphe. Pour l'éviter, dotons la boîte conteneur verte d'un remplissage supérieur suffisant :
.verte {
padding-top: 5em;
}
Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2
Nous pourrions aussi bien fixer la largeur de la boîte jaune et doter le texte de la boîte verte d'un remplissage à droite :
.verte {
padding-right: 7em;
}
.jaune {
width: 4em;
}
Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3
Utilisation : une mise en page à trois colonnes
La position absolue offre donc une alternative aux flottants pour réaliser des mises en pages à plusieurs colonnes. Le cas typique est celui des trois colonnes dont voici le code :
En CSS :
centre {
margin: 1em 25%;
}
.gauche {
position: absolute;
top: 1em;
left: 1%;
width: 18%;
}
.droite {
position: absolute;
top: 1em;
right: 1%;
width: 18%;
}
En HTML :
<body>
<div class="centre">
…
</div>
<div class="gauche">
…
</div>
<div class="droite">
…
</div>
</body>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 1 :
La position fixe
Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe.
Le positionnement fixe n'étant pas reconnu par Internet Explorer 5 et 6 Windows, un positionnement absolu doit s'y substituer dans ce navigateur. Ce résultat peut être atteint grâce à diverses formulations des styles jouant sur des syntaxes CSS2 ignorées par MSIE. Par exemple :
.fixe {
position: absolute;
top: 10px;
left: 10px;
}
html>body .fixe {
position: fixed;
}
MSIE Windows ne lira que la première définition de .fixe et ignorera la seconde car il ne comprend pas la syntaxe html>body. Les navigateurs supportant la position fixe liront les deux positionnements, mais le second se substituera au premier car il est placé après celui-ci dans la feuille de style.
Tout comme le positionnement absolu, le positionnement fixe est susceptible de provoquer des chevauchements. On employera donc des méthodes similaires pour l'exploiter.
Utilisation : un menu fixe en colonne
Pour fixer un menu de navigation dans une colonne vide à gauche du contenu, on définira les largeurs du contenu et du menu :
En CSS :
.content {
width: 65%;
border: 1px solid #000000;
padding: 1em 1%;
}
.menu {
position: absolute;
top: 1em;
right: 1%;
border: 1px solid #000000;
padding: 1em;
width: 20%;
}
html>body .menu {
position: fixed;
}
En HTML :
<body>
<div class="content">
…
</div>
<div class="menu">
…
</div>
</body>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 2
Utilisation : une barre de menu fixe
Lorsqu'il s'agit de créer une mise en page avec contenu et menus, la position fixe a l'inconvénient apparent de sacrifier une partie de la largeur d'affichage disponible, pour éviter les chevauchements.
En fait, cet inconvénient disparaît sitôt qu'on tire profit du chevauchement au lieu de chercher à l'éviter. Imaginons une barre de menu horizontale, fixée en permanence en haut de la fenêtre d'affichage :
En CSS :
.menufixe {
top: 0;
left: 0;
width: 100%;
border: 1px solid #000000;
position: absolute;
z-index: 2;
text-align: center;
background-color: #ffffff;
line-height: 2em;
}
html>body .menufixe {
position: fixed
}
.content {
z-index: 1;
padding-top: 3em;
}
En HTML :
<body>
<div class="content">
…
</div>
<p class="menufixe">
…
</p>
</body>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 3 :
Combinaisons des positions fixe et absolue
Imaginons à présent deux menus différents, tous deux placés dans la même colonne :
- le premier sera fixe en haut de la colonne ;
- le second sera en position absolue plus bas dans la même colonne.
La propriété CSS
z-index permet de spécifier le niveau d'empilement de chaque menu : avec un z-index supérieur à celui du menu fixe et un arrière-plan opaque, le menu en position absolue masquera temporairement celui-ci lors du défilement de la page. Le code nécessaire est :
En CSS :
.content {
width: 65%;
border: 1px solid #000000;
padding: 1em 1%;
}
.menufixe {
position: absolute;
top: 1em;
right: 2%;
border: 1px solid #000000;
padding: 1em;
width: 18%;
z-index: 2;
}
html>body .menufixe {
position: fixed;
}
.menuabsolu {
position: absolute;
top: 15em;
right: 1%;
border: 1px solid #000000;
padding: 1em;
width: 20%;
background-color: #ffffff;
z-index: 3;
}
En HTML :
<body>
<div class="content">
…
</div>
<div class="menu">
…
</div>
</body>
Le point délicat est, bien-sûr, le choix de la valeur donnée à la propriété top du menu en position absolu, afin d'être sûr qu'il n'empiète pas sur l'espace du menu en position fixe.
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 4 :
Conclusion
Le positionnement CSS donne donc toute liberté dans la mise en page. Comparée à l'utilisation des tableaux, cette technique offre des avantages essentiels :
- gestion de la présentation à partir d'un document unique pour un nombre quelconque de pages ;
- stricte séparation du contenu et de la présentation, d'où un contenu mieux structuré, dénué de balisage superflu ;
- meilleure accessibilité, le contenu pouvant être organisé correctement dans les navigateurs non graphiques, tout en étant librement disposé dans les navigateurs graphiques ;
- elasticité des mises en page obtenues, qui s'adaptent plus facilement aux différentes configurations des utilisateurs (taille de la zone d'affichage, règlages de tailles de caractères…) ;
- effets graphiques nouveaux, tels le recouvrement en position fixe/absolue.
