Positionnement absolu¶

Un élément avec un positionnement absolu est retiré du flux normal du document.

Il est alors placé par rapport à son ancêtre positionné le plus proche.

Le positionnement absolu se fait par rapport à l’ancêtre positionné le plus proche, ou, à défaut, du conteneur initial.

Exemple¶

Prenons le code suivant :

<html>
   <body>
      <main>
         <h1>mon document</h1>
      </main>
   </body>
</html>

Si l’on applique la déclaration position: absolute; à l’élément h1, celui-ci sera retiré du flux normal et sera positionné par rapport à son ancêtre positionné le plus proche

cas 1¶

Ici aucun ancêtre de notre élément n’est positionné. On place donc l’élément par rapport à l’élément initial html.

../../../_images/positionnements__absolu--1.svg

cas 2¶

Ici, l’élément body est positionné : il n’est plus static mais relative : L’élément h1 se positionne donc par rapport à celui-ci, s’agissant de son premier ancêtre positionné.

../../../_images/positionnements__absolu--2.svg

cas 3¶

Ici, l’élément main est positionné : il n’est plus static mais relative : L’élément h1 se positionne donc par rapport à celui-ci, s’agissant de son premier ancêtre positionné.

../../../_images/positionnements__absolu--3.svg

Voir aussi

Faites des tests sur cet exemple. Décommentez les éléments commentés pour observer le résultat.