На диаграмме показано действие относительного позиционирования.
Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой всякая. Текст бокса "outer" (с конца строки 1 до половины строки 2, и отчасти на строке 3) сдвинут вверх на 12px. Текст бокса "inner", правда и сдвинут также вверх, позиционирован касательно таким образом, что размещен что размещен своей типичной позиции с конца строки 2.
В дальнейшем элементе PRE вся строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:
Start
1 Beginning of body contents.
2 of outer contents.
Inner contents.
3
End of outer contents.
4 End of body
5 contents.
По умолчанию цвет текста - чёрный. "Start of outer contents" -алый. "Inner contents" - голубой. "End of outer contents" - алый.