La mise en forme d’une page web, autrefois réalisée à l’aide des tableaux, dispose aujourd’hui, grâce aux CSS, d’outils tel que le flottement et le positionnement. Nous ne parlerons pas du flottement dans cet article mais uniquement du positionnement et plus particulièrement du positionnement de type absolu et relatif.

Le positionnement, quelques rappels

Le positionnement est une notion assez simple qui permet d’indiquer précisément où des boîtes d’éléments apparaitront par rapport à leur bloc conteneur qui peut être l’élément racine (élément html), un élément parent ou un autre élément.

Le bloc conteneur

Dans le cas d’un élément flottant le bloc conteneur est l’élément parent de type bloc le plus proche. Avec le positionnement la notion de conteneur est un peu plus complexe.

• - Le bloc conteneur racine est dans la plupart des navigateurs matérialisé par un rectangle de la taille de la zone d’affichage. En HTML, l’élément racine est l’élément html.

• - Pour les éléments non-racine positionnés de façon relative ou static, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

• - Pour les éléments non-racine positionnés de façon absolu, le bloc conteneur est matérialisé par le parent le plus proche (de toute sorte) dont la propriété position a une valeur autre que static de la façon suivante :

• • * Si le parent est de type bloc, le bloc conteneur est matérialisé par le bord de l’espacement de cet élément, il s’agit donc de la zone délimitée par une bordure.

  • * Si le parent est de type en-ligne, le bloc conteneur est matérialisé par le bord du contenu du parent.

  • * Si il n’y a pas de parent, le bloc conteneur de l’élément est le bloc conteneur racine.

Il est a noter que les éléments peuvent être positionnés hors de leur bloc conteneur en utilisant des valeurs négatives.

Propriétés de décalage

Le positionnement utilise la propriété position qui peut prendre les valeurs : static (valeur par défaut), relative, absolute, fixed et inherit. Les positionnements de type relative, absolute et fixed utilisent les propriétés top, right, bottom et left pour décrire le décalage des côtés d’un élément positionné par rapport à son bloc conteneur.

Ces propriétés décrivent le décalage à partir du bord le plus proche du bloc conteneur. Par exemple, top indique à quelle distance le bord de la marge haute de l’élément positionné doit être placé depuis le bord supérieur de son bloc conteneur.

Les valeurs assignées à ces propriétés peuvent être positives ou négatives.

Notez que les valeurs positives provoquent un décalage vers l’intérieur, déplaçant les bords vers le centre du bloc conteneur, et que les valeurs négatives provoquent un décalage vers l’extérieur.

Il faut également comprendre que ces propriétés définissent le décalage depuis le côté analogue du bloc conteneur et non depuis son coin supérieur gauche.

Par exemple, left définit un décalage par rapport au côté gauche.

Sur le schéma ci-joint, le bord externe gauche de l’élément positionné est placé à 90 px du bord gauche du bloc conteneur.

Largeur et hauteur

Les propriétés width et height permettent de fixer respectivement la largeur et la hauteur d’un élément positionné. Si il est important parfois de fixer ces propriétés, on s’aperçoit que ce n’est pas toujours nécessaire. En effet le placement des quatre côtés d’un élément à l’aide de top, right, bottom, left peuvent fixer implicitement largeur et hauteur par les décalages qu’ils induisent.

Si par nécessité il faut limiter la largeur et la hauteur d’un élément, CSS2 met à disposition les propriétés min-width et min-height qui donne une dimension minimum à la zone de contenu d’un élément, et les propriétés max-width et max-height qui, vous l’aurez deviné, donne une dimension maximum à la zone de contenu d’un élément.

Débordement

Si le contenu d’un élément est trop important pour la taille de ce dernier, il risque de déborder de l’élément lui-même. Cette situation peut être contrôlé à l’aide de la propriété overflow dont les valeurs possibles sont visible (par defaut), hidden, scroll, auto, inherit.

• - La valeur visible signifie que le contenu de l’élément reste visible hors de la boîte d’élément.

• - La valeur scroll signifie que le contenu est rogné sur les côtés de la boîte d’élément mais on laisse à l’utilisateur la possibilité de lire le contenu supplémentaire à l’aide de scroll par exemple.

• - La valeur hidden signifie que le contenu est rogné sur les côtés de la boîte d’élément mais le contenu supplémentaire est caché à l’utilisateur.

• - La valeur auto signifie que c’est au navigateur de déterminer le comportement à employer.

Visibilité

La propriété visibility contrôle la visibilité d’un élément. Les valeurs possibles sont visible (par defaut), hidden, collapse, inherit.

• - La valeur visible signifie que l’élément est visible.

• - La valeur hidden signifie que le contenu est rendu invisible mais l’élément affecte toujours la mise en page du document comme si il était visible. Notez la différence avec display:none où l’élément disparaît complètement y compris du document si bien qu’il n’a plus aucun effet sur la mise en page.

• - La valeur collapse est employé dans l’affichage des tables CSS.

Placement sur l’axe z

Lorsque plusieurs éléments positionnés se chevauchent ou veulent coexister au même endroit, il se peut qu’un élément soit caché par un autre de superficie supérieure.

L’ordre d’empilement naturel des éléments est déterminé par la position de l’élément dans le flux. Le dernier élément affiché dans le flux se trouvera au dessus des autres.

Cet ordre peut être contrôlé par la propriété z-index, en effet, un élément dont la valeur numérique de z-index est élevée se trouve en avant par rapport à un élément dont la valeur de z-index est faible. L’élément dont la valeur est la plus élevée se trouve donc au dessus des autres éléments.

Positionnement absolu

Un élément positionné de manière absolue est retiré du flux puis positionné par rapport à son bloc conteneur. L’élément positionné de façon absolue peut chevaucher d’autres éléments ou être chevauché.

Le bloc conteneur d’un élément positionné de manière absolue est l’élément parent le plus proche dont la valeur de position est différente de static. Il est courant de choisir un élément qui servira de bloc conteneur à un élément positionné de manière absolue en lui assignant une position relative sans préciser de décalage. Si il n’y a pas de parent dont la valeur de position est différente de static, le bloc conteneur de l’élément positionné de manière absolue est le bloc conteneur racine.

Exemple :

<html>
<head>
<style type="text/css">

.main {
    margin:100px 0 0 100px;
    border:1px solid #d0d0d0;
    width:30%;
}

.conteneur {
    position:relative;
    background:#ff5555;
}

b {
    position:absolute;
    background:#fff888;
    top:50px;
    left:50px;
}

</style>
</head>

<body>

<div class="main">
<p>
Ce paragraphe ne joue pas le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière absolue.
</p>

<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière absolue.
</p>
</div>

</body>
</html>

Si vous souhaitez contrôler le bloc conteneur initial plutôt que de laisser le navigateur s’en charger, il suffit d’assigner par exemple au body
de votre document une position relative :

body {position:relative;}

Il est important de comprendre aussi que lorsqu’un élément est positionné de manière absolue, il définit un bloc conteneur pour ses éléments enfants.

Positionnement relatif

Dans le cas d’un positionnement relatif, l’élément reste dans le flux. Le décalage s’opère de la même manière que pour le positionnement absolu mais l’élément laisse un espace blanc à l’endroit où il aurait dû se trouver dans le flux normal de la page. Un élément positionné de manière relative établit un nouveau bloc conteneur pour ses enfants à l’endroit où l’élément a été positionné.

Je rappel que pour les éléments non-racine positionnés de façons relative, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

Reprenons notre exemple mais en positionnant l’élément <b> de manière relative.

<html>
<head>
<style type="text/css">

.main {
    margin:100px 0 0 100px;
    border:1px solid #d0d0d0;
    width:30%;
    z-index:0;
}

.conteneur {
    position:relative;
    background:#ff5555;
    z-index:1;
}

b {
    position:relative;
    background:#fff888;
    top:50px;
    left:50px;
    z-index:2;
}

</style>
</head>

<body>

<div class="main">
<p>
Ce paragraphe joue le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière relative.
</p>

<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière relative.
</p>
</div>

</body>
</html>

On observe sur la copie d’écran les espaces vides laissés par les éléments <b> positionnés de manière relative. Nous avons rajouté des z-index pour que tous les blocs soient visibles et que les plus grand ne masquent pas les plus petits.

Ici les deux bloc parents <p> jouent un rôle de conteneur pour l’élément <b>.

Conclusion

La mise en page par flottement est plus populaire auprès des designer et intégrateurs web que la mise en page par positionnement. Cela est probablement dû au fait que la mise en page par flottement est plus simple à appréhender que celle par positionnement.

Cependant, l’utilisation des blocs flottant pose parfois problème, ce système étant très sensible aux dépassements de longueur, et de largeur. L’utilisation du positionnement absolu et relatif peut être une solution alternative beaucoup plus robuste si elle est utilisée avec habilité. Je pense que cette technique vaut la peine qu’on y accorde quelques gouttes de sueurs.

Une dernière remarque : pour que le positionnement ne pose pas de problème lors d’un changement de résolution de l’écran, il est conseillé de d’attribuer des valeurs en % ou en em aux propriétés width et height.

Mes sources

Ouvrage :

L’essentiel de cet article a été rédigé à partir du livre “CSS, La référence” écrit par Eric A. Meyer, traduit par Hervé Soulard aux éditions O’Reilly.