Auteur: Jérôme Forget. Publié le 26 mars 2007.
Lorsqu'un élément est positionné en absolu, il est complètement retiré du flux normal du document. Il est ensuite positionné par rapport à son bloc conteneur et ses extrémités sont placées avec les propriétés de décalage (top, left, etc.). En étant retiré du flux normal du document, l'élément positionné en absolu peut chevaucher un autre élément, ou être chevauché par lui.
Le bloc conteneur d'un élément positionné en absolu est le plus proche parent positionné avec une valeur autre que static. Lorsqu'on veut établir le contexte de positionnement d'un élément positionné en absolu, on définira le bloc conteneur en lui donnant une position relative sans décalage :
div { position: relative; }
p { position: absolute; top: 0; left: 50%; }
<div>
<p>Un paragraphe positionné en absolu.</p>
</div>
Il est important de noter qu'un élément positionné en absolu devient à son tour le bloc conteneur de tous ses éléments descendants. On peut ainsi positionner un élément en absolu, puis positionner en absolu l'un de ses enfants.
div { position: relative; width: 100%; height: 10em; border: 1px solid; background: #eee; }
div.a { position: absolute; top: 0; right: 0; width: 15em; height: 100%;
margin-left: auto; background: #ccc; }
div.b { position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;
margin-top: auto; background: #aaa; }
<div>
<div class="a">élément A positionné en absolu
<div class="b">élément B positionné en absolu</div>
</div>
bloc conteneur
</div>
Correctement utilisé (avec des unités de tailles relatives comme em ou des pourcentages), le positionnement absolu permet la construction de page fluides s'adaptant aux diverses résolutions et aux changements de taille des polices. C'est donc une méthode de positionnement intéressante pour la structure globale d'une page Web, les blocs conteneurs, les grandes zones de la page et les éléments uniques (en-têtes, menus, pieds de page, etc.).
Le positionnement absolu est cependant déconseillé pour les éléments de contenu (textes, images) qui doivent rester fluides les uns par rapport aux autres.