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 : .. code-block:: html

mon document

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``. .. image:: ../diagrammes/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é. .. image:: ../diagrammes/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é. .. image:: ../diagrammes/positionnements__absolu--3.svg ---- .. seealso:: Faites des tests sur `cet exemple `_. Décommentez les éléments commentés pour observer le résultat.