Ce dessin illustre les effets du positionnement relatif d'une boîte.
Il y a une fenêtre de document dont les 8 lignes, numérotées de 1 à 8, ont une hauteur de 24px. Le texte de la boîte de "Externe" (à la fin de la ligne 1, continuant jusqu'à la moitié de la ligne 2 et se terminant à la moitié de la ligne 3) est déplacé de 12px vers le haut. Le texte de la boîte "Interne", bien que déplacé en même temps vers le haut, est positionné relativement et donc, retrouve le même emplacement, dans la seconde moitié de la ligne 2, que celui qu'elle aurait dans un flux normal.
En utilisant une transcription avec un élément PRE, chacune des lignes de hauteur 24px est simulée avec deux lignes, la seconde commençant ave un numéro approprié. Voici les lignes de texte telles qu'elles apparaissent dans l'image :
Début du
1 Début du corps du contenu.
2 contenu d'Externe.
Contenu d'Interne.
3
Fin du contenu d'Externe.
4 Fin du corps
5 du contenu.
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.