Pour voir comment un élément parent positionné agit sur la position absolue d'un élément, étudiez l'exemple suivant.
Le texte à l'intérieur de l'élément DIV est cachée par l'image car celle-ci est positionée
au-dessus du texte.
L'élément IMG a pour parent l'élément DIV qui, lui-même, a pour parent l'élément HR.
Cet exemple place l'élément image (IMG), en position absolue, au coin supérieur gauche (0,0)
de l'élément DIV, qui lui est même positionné (en position relative) à (20, 10) par rapport à l'élément HR.
Le texte à l'intérieur de l'élément DIV est caché par l'image car celle-ci est positionnée
au-dessus du texte.
En choisissant une position absolue pour un élément, on "casse" le positionnement normal par défaut du HTML
des éléments les uns par rapport aux autres.
Si d'autres élément occupent déjà la position donnée,
leurs positions respectives ne seront pas affectées.
En conséquence, tous les éléments seront affichés au même endroit et se superposeront.
Vous pouvez controler cette superposition en utilisant l'attribut z-index pour spécifier l'ordre dans
lequel les éléments seront empilés au même emplacement.
Position relative
Le superscript dans ce motxyz est "xyz".
Le superscript dans ce motxyz est "xyz".
Spécifier la valeur relative à l'attribut position, place l'élément dans l'ordonnancement naturel par défaut du HTML
mais décalera la position de l'élément par rapport au contenu qui précéde.
Par exemple, placer une partie du texte dans un paragraphe avec la position "relative"
fera qu'il sera positionné par rapport à la partie précédente du texte dans le paragraphe.
<P>Le superscript dans ce mot<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> est "xyz".
Même si l'utilisateur redimensionne sa fenêtre, le "xyz" continuera d'apparaître trois pixels au-dessus de l'alignement naturel (baseline) du texte.
Vous pouvez spécifier l'attribut left de la même façon pour changer l'espacement horizontal entre "name" et "xyz".
Si on choisit une position absolue pour le contenu de l'élément SPAN , le "xyz" sera positionné par rapport à l'élément BODY
(ou l'élément positionné suivant dans la hiérarchie), et le "xyz" sera affiché au coin supérieur
de la fenêtre — ce qui ne serait pas l'effet attendu !
Texte et éléments qui suivent un élément en position relative occupent leur propre espace et ne recouvrent pas l'espace occupé par l'élément positionné.
contrairement à un élément en position absolue, qui "casse" le positionnement par défaut du HTML.
Il est cependant tout à fait possible qu'un élément en position relative recouvre d'autres objets et élément sur la page.
Pour ce faire, comme avec le positionnement absolu, vous pouvez utiliser l'attribut z-index.