Auteur: Jérôme Forget. Publié le 26 mars 2007.
L'idée derrière le positionnement est simple. Il permet de définir exactement à quel endroit la boîte d'un élément devrait apparaître, en fonction de l'endroit où elle se trouve normalement, ou en fonction d'un élément parent, ou d'un autre élément, ou même en fonction de la fenêtre du navigateur.
Regardons d'abord les quatre différents types de positionnement que nous offre CSS :
La position statique est très simple. C'est le positionnement par défaut qu'effectue le navigateur. Cela correspond au flux normal de la page.
La position relative permet de positionner un élément par rapport à l'endroit où il apparaîtrait dans le flux normal de la page. Ainsi, on peut décaler un élément par rapport au flux normal, à sa position statique. Si un élément parent est positionné relativement et contient un élément positionné de façon absolue, le coin supérieur gauche de l'élément fils sera positionné par rapport au coin supérieur gauche du parent.
Le positionnement absolu permet de placer le coin supérieur gauche d'un élément par rapport à son élément parent. Il ne positionne pas l'élément par rapport à la fenêtre, mais par rapport au bloc conteneur de l'élément.
Le positionnement fixe permet de placer le coin supérieur gauche d'un élément par rapport à la fenêtre du navigateur. Ainsi, si on fait défiler la page, l'élément demeure en place. Le positionnement fixe permet d'avoir tous les avantages du fenêtrage sans les inconvénients de la balise <frame>.
On appelle bloc conteneur le premier élément parent de type bloc d'un élément donné. Dans le positionnement, le rapport au bloc conteneur est très important. CSS2.1 définit les comportements suivants :
Le bloc conteneur de l'élément racine (le bloc conteneur initial) est établi par le navigateur. L'élément racine est soit l'élément html ou l'élément body. Dans la plupart des navigateurs, le bloc initial est un rectangle de la grandeur de la fenêtre du navigateur.
Pour un élément avec une position relative ou static, le bloc conteneur est formé par les extrémités de la boîte de contenu du plus proche élément parent de type bloc, de la cellule de tableau ou de la boîte de ligne.
Pour un élément avec une position absolute, le bloc conteneur est le premier élément parent positionné, avec une position autre que static.
Évidemment, un élément peut être positionné à l'extérieur de son bloc conteneur. En réalité, considérons les blocs conteneur comme des « contextes de positionnement ».
Trois des types de positionnement décrit plus haut - relative, absolute et fixed - utilise quatre propriétés qui permettent de décaler un élément par rapport à son bloc conteneur. Ces propriétés de décalage - top, right, bottom et left - sont des éléments importants du positionnement CSS.
La propriété top décrit à quelle distance la marge supérieure d'un élément devrait être placée par rapport au bord supérieur du bloc conteneur. Une valeur positive à la propriété top entraînera donc un élément vers le bas, alors qu'une valeur négative permettra à l'élément de se déplacer au-dessus du bloc conteneur. En décalant la boîte de contenu d'un élément, on déplace bien entendu les autres parties d'un élément - les marges intérieures, extérieures et les bordures.
Dans l'exemple suivant, une division est positionné en absolu par rapport au bloc conteneur initial :
div { position: absolute; top: 50%; bottom: 0; left: 50%; right: 0; }
Nous l'avons vu précédemment, les propriétés width et height permettent de définir la largeur et la hauteur d'un élément. Même si c'est parfois important de spécifier la largeur et la hauteur d'un élément, ce la n'est pas absolument requis. Par exemple, si un élément est positionné en plaçant chacun de ses côtés avec les propriétés top, right, bottom et left, les dimensions de la zone de contenu sont définies par ses décalages. La zone de contenu occupera tout l'espace libre.
Il est possible de restreindre la largeur et la hauteur en utilisant les propriétés min-max de CSS2 (min-width, min-height, max-width et max-height).
Si le contenu d'un élément est trop important pour ses dimensions, le contenu va déborder de son élément. CSS2 permet quelques façons de sauver la mise dans cette situation avec la propriété overflow. Par défaut, la valeur de cette propriété est visible, c'est donc dire que le contenu qui déborde de l'élément sera visible à l'extérieur de sa boîte.
Si la valeur est , une barre de défilement apparaîtra, ce qui permettra de visualiser tout l'information sans modifier l'apparence de la boîte. Remarquez que si la valeur de la propriété est scroll, une barre de défilement apparaîtra en tout temps, même si son usage n'est pas requis.
Si la valeur de overflow est hidden, le contenu débordant de la boîte sera masqué et invisible.
L'autre valeur possible est auto. Cette valeur confie à l'agent utilisateur le soin d'afficher une barre de défilement si celle-ci est nécessaire.
Il est possible de contrôler la visibilité d'un élément avec la propriété visibility. Cette propriété est simple, une valeur de visible rendra l'élément visible, hidden le rendra invisible.
Un élément rendu invisible par la propriété visibility occupera quand même un espace dans la page. En fait, l'élément est présent mais il est invisible. C'est la différence entre cette propriété et display:none. La propriété display:none fera disparaître complètement l'élément, et l'espace qu'il devait occuper est rempli.
Étant donné que les éléments peuvent très bien s'empiler les uns sur les autres, on peut imaginer que la page-écran possède une profondeur. Celle-ci s'exprime par la propriété z-index.
z-index permet de modifier l'ordre d'empilement des éléments. Cette propriété accepte toute valeur numérique, même des nombres négatifs. Plus le nombre sera élevé, plus l'élément se rapprochera de l'utilisateur. Ainsi une valeur négative éloigne l'élément de l'utilisateur et le place en arrière-plan.