Ce dessin montre les effets d'un positionnement absolu d'une boîte, notée "Interne", en fonction du bloc conteneur établi par un ancêtre en position relative, celui-ci noté "Externe".
Il y a la fenêtre d'un document dont les 8 lignes, numérotées de 1 à 8, ont une hauteur de 24px. Tout le texte du corps et de "Interne" est rangé dans les lignes 1, 2 et 3. La boîte de "Interne" est positionnée relativement au bords haut et gauche de la première boîte en-ligne de l'élément "Externe".
En utilisant une transcription avec un élément PRE, chacune des lignes de hauteur 24px étant simulée avec deux lignes, la seconde commençant avec le numéro approprié. Les bords de référence pour le positionnement de la boîte de "Interne" sont représentés dans le dessin par des tirets épais. Les coordonnées du haut et de gauche de la boîte de "Interne" sont étiquetées avec (+200, -100). Dans la transcription avec l'élément PRE ci-dessous, ces bords de référence de "Interne" sont représentés par des barres verticales et des caractères "=", et les valeurs pour le déplacement de la boîte "Interne" sont donnés entre crochets. Voici les lignes de texte telles qu'elles apparaissent approximativement dans l'image :
====
|
1 Début du corps du contenu.|Début du
2 contenu d'Externe. Fin du contenu
3 d'Externe. Fin du corps du contenu.
4 [(+200, -100)]
5 Contenu
6 d'Interne.
7
8
Par défaut, la couleur du texte est noire. L'expression "Début du contenu d'Externe" est en rouge. L'expression "Contenu d'Interne" est en bleu. L'expression "Fin du contenu d'Externe" est en rouge.