Este diagrama ilustra el efecto del posicionamiento relativo.
Se muestra una ventana de documento, con 8 líneas (numeradas de 1 a 8), cada una de 24px de alto. El texto de la caja de "externo" (al final de la línea 1, parcialmente en la línea 2 y parcialmente en la línea 3) es desplazado hacia arriba 12px. El texto de la caja de "interno", conceptualmente también desplazada hacia arriba, ha sido posicionada relativamente de modo que se coloca en la posición de su flujo normal al final de la línea 2.
En el siguiente ejemplo con un elemento PRE, cada línea de 14px es simulada por dos líneas, la segunda comienza con el número apropiado. Las líneas, como aparecen en la imagen, contienen:
Este
1 El comienzo del contenido.
2 es el tema externo.
Tema interno.
3
Fin del tema externo.
4 El final del
5 contenido.
El color de texto predeterminado es negro. "Este es el tema externo" es rojo. "Tema interno" es azul. "Fin del tema externo" es rojo.