Introduction au positionnement CSS
Par Noah Stokes
Si vous êtes un développeur ou un designer qui aime le code, les mises en page basées sur les CSS représentent le cœur même de votre travail. Histoire de rafraîchir la mémoire de certains, ou d’en aider d’autres à découvrir le sujet, jetons un coup d’œil à la propriété CSS position pour voir comment construire des thèmes CSS conformes aux standards et garantis sans tableaux.
Tout est dans la position
Le positionnement CSS est souvent mal compris. Parfois, enragé par un bug, nous appliquons différentes valeurs à la position d’un sélecteur quelconque, jusqu’à en trouver une qui fonctionne. C’est un processus pénible qui peut faire l’affaire un certain temps, mais il serait mieux de savoir pourquoi indiquer position: relative parvient à régler notre bug d’affichage. Mon but est que nous puissions aprendre les valeurs et les comportements de la propriété position, et surtout comprendre comment une valeur peut affecter notre mise en page. La spécification CSS nous offre cinq valeurs pour la propriété position : static, relative, absolute, fixed et inherit. Chaque valeur correspond à un objectif précis. C’est en comprenant cet objectif que l’on pourra maîtriser les mises en page en CSS.
Suivez le flot
Commençons par prendre un peu de recul pour reconnaître le terrain sur lequel nous travaillons. Tout comme dans la vraie vie, en CSS nous travaillons au sein de limites. En CSS, cette limite s’appelle le flux normal. On lit dans la spécification CSS 2.1 que :
Les boîtes dans un flux normal appartiennent à un contexte de mise en forme, bloc ou en-ligne, mais pas les deux en même temps. Les boîtes de bloc participent à un contexte de mise en forme bloc, les boîtes en-ligne à un contexte de mise en forme en-ligne.
(NDT : traduction française de la recommandation CSS 2 du W3C)
Il faut voir les « boîtes » décrites dans ce texte comme des cubes en bois, du même genre que ceux avec lesquels vous jouiez quand vous étiez gamin impétueux. Il vous faut maintenant voir le flux normal comme une loi semblable à la loi de la gravitation. Le flux normal du document, c’est la façon dont vos éléments s’empilent les uns sur les autres, de haut en bas, suivant l’ordre où ils apparaissent dans votre code. Souvenez‑vous quand vous construisiez des tours géantes avec vos cubes : le flux normal, c’est le même principe que ces cubes de bois liés entre eux par la loi de la gravitation. Dans votre jeu d’enfant, vous placiez les cubes les uns sur les autres ; dans votre balisage, vous obtenez un élément après l’autre. Une chose que vous ne pouviez pas faire quand vous étiez enfant, en revanche, était de donner à ces cubes des propriétés qui défieraient la loi de la gravitation. Tout d’un coup, les CSS paraissent nettement plus sympa que vos cubes.
Static et relative : rien de nouveau jusqu’ici
Les valeurs static et relative attribuées à position se comportent comme vos cubes en bois — ils se superposent les uns les autres. Notez que static constitue la valeur par défaut de tout élément, faute d’y appliquer une autre. Si vous mettez trois éléments positionnés en static dans votre code, ils vont se placer les uns sur les autres, sans surprise. Voyons cet exemple avec trois éléments, chacun recevant la valeur static pour la propriété position :
#box_1 {
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: static;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 {
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}Dans l’exemple A, vous pouvez voir trois éléments superposés comme une simple tour. Merveilleux, n’est‑ce pas ? Vous venez de passer votre premier niveau de positionnement CSS. Félicitations !
Vous pouvez utiliser la valeur static pour des mises en page simples, à colonne unique, où chaque élément vient se poser sur le suivant. Si vous voulez commencer à déplacer ces éléments à l’aide de propriétés de décalage comme top, right, bottom et left, vous êtes coincé. Ces valeurs ne sont pas disponibles pour un élément static. En fait, un élément statique ne peut même pas créer un nouveau système de coordonnées pour des éléments descendants. Hein ? Quoi ? C’est quoi, cette histoire de « système de coordonnées » ? Ne bougez pas, j’ai compris le message. Je vais vous expliquer à l’aide de la valeur relative.
Les éléments qui reçoivent un positionnement relatif se comportent de la même façon que ceux qui sont statiques : ils s’entendent bien avec leurs voisins, s’empilent gentiment et ne mettent pas le bazar. À peine croyable, non ? Souvenez‑vous de notre exemple précédent. Cette fois, nous avons appliqué la valeur relative :
#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 {
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}L’exemple B montre que les éléments positionnés en relatif se comportent de façon tout à fait identique à ceux positionnés en statique. Mais ce que vous ne savez peut‑être pas, c’est que les éléments qui ont la valeur relative sont comme Clark Kent : ils dissimulent de bien plus grands pouvoirs que leurs congénères statiques…
Pour débuter, nous pouvons attribuer l’une de ces décalages à un élément relatif : top, right, bottom ou left. À l’aide du balisage tiré de notre exemple précédent, appliquons un décalage à #box_2 :
#box_2 {
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}L’exemple C montre ce que donne ce positionnement avec relative. Nos trois blocs s’empilent gentiment, mais cette fois le bloc bleu (#box_2) s’écarte de 200 pixels du bord gauche. C’est ici que nous commençons à modifier la loi de la gravitation à notre guise. Le bloc bleu est toujours dans le flux du document (puisque les éléments s’empilent les uns sur les autres), mais observez le bloc vert en bas (#box_3) : il est placé sous le bloc bleu, alors même que celui‑ci n’est pas directement au‑dessus de lui. Quand nous utilisons un décalage pour déplacer un élément positionné en relatif, cela n’affecte pas les éléments qui le suivent. Le bloc vert reste placé comme si le bleu n’était pas décalé. Essayez ça avec des cubes en bois…
Autre super‑pouvoir de la valeur relative : la possibilité de créer un système de coordonnées pour ses éléments enfants. Un système de coordonnées est un point de référence pour les décalages. Souvenez‑vous de l’exemple C, notre bloc bleu (#box_2) n’est situé à l’intérieur d’aucun autre élément, donc le système de coordonnées qu’il utilise pour se décaler à 200 pixels de la gauche du document est le document lui‑même. Si nous plaçons l’élément #box_2 à l’intérieur de #box_1, nous obtiendrons un autre résultat, car #box_2 va se positionner relativement au système de coordonnées de #box_1. Pour l’exemple suivant, nous ne modifierons rien au CSS, mais nous allons retoucher notre code HTML pour déplacer #box_2 à l’intérieur de #box_1 :
<div id="box_1">
<div id="box_2"></div>
</div>L’exemple D montre ce que donne notre nouveau balisage. À cause du nouveau système de coordonnées, le bloc bleu calcule son décalage de 200 pixels à partir de la gauche du bloc rouge (#box_1) et non plus à partir du document. Cette pratique est plus courante quand les éléments se voient attribuer position: absolute — tel que vous auriez aimé construire vos tours.
Absolute : n’inporte où, n’inporte quand
Si la valeur relative se comporte comme Superman, alors la valeur absolute renvoie à Inception — un lieu où vous pouvez concevoir votre propre univers. Contrairement aux valeurs static et relative, un élément positionné de façon absolue est retiré du flux normal. Cela veut dire que vous pouvez le mettre où vous voulez, car il n’affectera ou ne sera affecté par aucun autre élément dans le flux. Voyez‑le comme un élément doté d’un grand morceau de velcro dans le dos. Il suffit de lui dire où se coller, et il va y rester. De la même façon que pour la valeur relative, les éléments positionnés en absolu vont répondre aux décalages. Vous pouvez placer un élément à top: 100px et left: 200px, et cet élément se mettra exactement à 100px du haut du document, et à 200px de son bord gauche. Voyons un exemple en utilisant quatre éléments :
#box_1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 {
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}L’exemple E nous montre quatre boîtes, chacune située dans un coin de la fenêtre du navigateur. Comme nous avons fixé en absolute la position de chaque boîte, c’est comme si nous avions collé une boîte au velcro dans chaque coin de la fenêtre du navigateur. Si nous redimensionnons cette fenêtre, les boîtes resteront dans leurs coins respectifs. Si vous réduisez le navigateur de telle sorte que les boîtes se recouvrent, vous remarquerez qu’il n’existe aucune interaction : c’est parce qu’elles sont exclues du flux normal du document.
Tout comme les éléments placés de façon relative, ceux qui le sont de manière absolute créent un nouveau système de coordonnées pour les éléments enfants. L’exemple F modifie l’exemple E en plaçant un élément orange à l’intérieur de chaque boîte. Remarquez que les coordonnées de décalage fonctionnent par rapport à chaque élément parent.
Histoire de ne pas se faire doubler par d’autres valeurs de positionnement, la valeur absolute offre certaines fonctionnalités vraiment très pratiques en utilisant les propriétés de décalage. Si vous prenez deux de ces propriétés, voire toutes les quatre, vous pouvez étirer un élément sans lui définir de largeur ni de hauteur : il n’est limité que par son élément-parent, ou bien par le document lui‑même. Voyons cela en action. Si vous prenez le code suivant :
#box_1 {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
background: #44accf;
}
#box_2 {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: #ff9c34;
}Dans l’exemple G, nous avons créé une bordure décalée de dix pixels par rapport au bord du document, et cela reste parfaitement fluide si on redimensionne la fenêtre : le tout est réalisé avec un positionnement et des décalages en absolute. Dans un autre exemple, nous pouvons créer une mise en page en deux colonnes qui occupe toute la hauteur du document. Voici la CSS :
#box_1 {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 80%;
background: #b7d84b;
}L’exemple H montre une mise en page en deux colonnes occupant tout l’écran. Même s’il ne s’agit sans doute pas de la meilleure façon de concevoir une mise en page en deux colonnes, cela montre quand même toute la puissance de la valeur absolute. En réfléchissant un peu au‑delà, vous pouvez trouver de nombreuses applications utiles à position: absolute. Des manipulations du même genre n’exploitent qu’une seule valeur de décalage. Par exemple :
#box_1 {
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}Dans l’exemple H2, regardez bien le bloc bleu. Remarquez que je n’utilise qu’un seul décalage, left: 100px;. Cela permet à l’élément #box_2 de maintenir sa position verticale, tout en s’éloignant de la gauche de 100 pixels . Si nous appliquions un second décalage de zéro par rapport au bord supérieur, nous verrions que notre bloc bleu (#box_2) est tiré vers le haut du document. On peut le voir ici, dans l’exemple H3 :
#box_2 {
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}Fixed : personne ne bouge !
Un élément auquel on a attribué position: fixed partage les mêmes règles qu’un élément positionné en absolu, mise à part que c’est la zone d’affichage (fenêtre du navigateur ou du périphérique) qui détermine le placement de l’élément « fixé » (fixed), et non pas un élément parent. D’autre part, un élément fixed ne défile pas avec le document. Il reste… fixe, quoi ! Voyons un exemple :
#box_2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}L’exemple I montre un pied de page (« footer ») avec à l’intérieur un texte de copyright. Ce pied de page constitue un élément fixe. Si vous faites défiler le document, vous verrez qu’il ne bouge pas. Remarquez que les propriétés de décalage left et right sont mises à zéro. Dans la mesure où la valeur fixed se comporte de la même façon que la valeur absolute, nous pouvons étirer la largeur de l’élément pour qu’il occupe toute la place du support de visualisation, tout en fixant cet élément en bas grâce à bottom: 0. Mais attention à fixed : son support dans les navigateurs anciens est plus mauvais qu’autre chose. Par exemple, d’anciennes versions d’Internet Explorer interprètent les éléments fixed comme des éléments avec static. Or vous savez maintenant que les éléments statiques ne se comportent pas comme les fixes, n’est‑ce pas ? Si vous voulez vraiment utiliser des éléments fixes dans une mise en page, il existe plusieurs solutions qui vous aideront à faire en sorte que votre élément se comporte comme prévu dans des navigateurs qui ne comprennent pas la valeur fixed.
Inherit : pour que rien ne change
Comme je l’ai évoqué au début de cet article, il y a cinq valeurs possibles pour la propriété position. La cinquième est inherit. Elle fonctionne comme l’indique son nom : l’élément hérite de la valeur de son élément parent. En principe, les éléments qui ont une valeur de positionnement n’héritent pas naturellement des valeurs de leurs parents, puisque la valeur static est assignée par défaut si aucune valeur de positionnement n’est indiquée. Mais vous pouvez saisir inherit ou bien la valeur de l’élément parent, et ainsi obtenir la même valeur.
Dans les faits
Assez de blabla et passons à l’action. Jetons un œil à un exemple de site web qui utiliserait toutes les valeurs de positionnement. L’exemple J montre la mise en page typique d’un site contenant un en-tête, la navigation, le contenu, et un pied de page. Voyons chaque élément l’un après l’autre pour parler de son positionnement et comprendre les choix qui ont été faits.
Commençons par notre élément #container. Il s’agit simplement de l’élément conteneur que j’utilise pour centrer notre contenu dans la fenêtre de visualisation. L’élément de navigation #nav est le premier élément inclus dans notre élément #container. Cet élément #nav ne reçoit aucune propriété de positionnement, donc par défaut, sa valeur sera static. Ça nous va très bien : nous n’avons aucun besoin de décaler cet élément, ni de créer par son biais de nouveau système de coordonnées. En revanche, c’est ce dont nous aurons besoin avec #content, notre prochain élément. C’est pourquoi nous lui avons appliqué une position relative.
Comme nous ne mettons ici en œuvre aucun décalage, la valeur de position n’a pas de réelle influence sur l’élément #content, mais nous l’avons placé là pour créer un nouveau système de coordonnées pour l’élément #callout (l’encadré latéral). Nous assignons position: absolute à notre élément #callout, et puisque son élément parent (#content) est placé en relative, les propriétés de décalage que nous appliquons à #callout se basent sur les coordonnées créées par #content. L’élément #callout utilise un décalage négatif de 80 pixels à droite pour tirer cet élément vers l’extérieur de l’élément parent qui le contient. De plus, j’ai employé sur l’élément #callout l’une des possibilités les plus cool que nous offre la valeur absolute : en situant les décalages en haut et en bas à 100px, j’ai étiré l’élément #callout qui prend maintenant toute la hauteur du document, moins un décalage de 100 pixels en haut et en bas.
Comme l’élément #callout a une valeur absolue, cela n’affecte aucun autre élément. Il va donc falloir ajouter un espacement (« padding ») à l’élément #content pour éviter que nos paragraphes ne disparaissent en‑dessous. Le fixer à 250px à droite maintient notre contenu bien visible pour nos lecteurs. Pour conclure, nous avons ajouté un pied de page avec une position fixed pour bien le garder en bas de la page. Au fur et à mesure que nous faisons défiler la page, le pied de page reste bien en place. Tout comme nous avons ajouté un espacement à #content pour éviter que nos paragraphes ne soient masqués, nous allons faire de même pour l’élément #footer car son comportement est similaire à un élément positionné avec absolute. En ajoutant 60px d’espacement inférieur à l’élément #content, nous nous assurons qu’il est possible de faire dérouler l’intégralité du document sans qu’aucun texte ne puisse se cacher sous l’élément #footer, comme ce devrait normalement être le cas.
Nous voilà maintenant avec une belle mise en page toute simple, composée d’un menu de navigation, d’un espace de contenu, d’une zone d’encadré et d’un pied de page, tout en ayant placé des éléments en static, relative, absolute et fixed. Dans la mesure où nous avons utilisé la valeur fixed dans cette mise en page, il faudra appliquer certaines techniques pour s’assurer que les navigateurs les plus anciens respecteront notre design.
Conclusion
Grâce à la puissance de la propriété position, vous allez pouvoir créer des mises en page en toute confiance. Fort heureusement, 80% des valeurs de la propriété position sont très bien interprétées dans les navigateurs récents comme dans les plus anciens. Seule la valeur fixed doit vous tenir en alerte. C’est en comprenant intimement le fonctionnement de ces valeurs que vous poserez votre CSS sur des bases solides, en n’ayant plus pour limite que votre imagination. Si tout va bien, l’époque où vous vous arrachiez les cheveux à tenter de régler des problèmes de positionnement à coups de devinettes est bel et bien révolue.
Note de la rédaction : Attention ! Dans l’exemple J, l’utilisation de position: absolute pose un problème d’ergonomie et d’accessibilité. Dans le code source, la div « callout » vient avant la suite de la div « content » alors qu’elle apparait après visuellement.
Quand on navigue dans la page en tabulant au clavier ou avec une revue d’écran, le curseur se placera dans la zone « callout », avant la suite de la zone « content ». Pour éviter ce problème, il suffit de placer la div « callout » en fin de div « content », et de donner à cette dernière une hauteur minimum suffisante pour que toute la div « callout » soit visible quand la div « content » est courte.
Plus d’informations dans le guide Accessiweb, critère 10.4
http://www.alistapart.com/articles/css-positioning-101/