Описание примера относительного плавающего блока

Эта диаграмма иллюстрирует эффекты относительного позиционирования:

Показано окно документа с 8 строками (пронумерованных от 1 до 8), каждая высотой 24px. Текст блока "outer" (в конце строки 1, половина строки 2 и половина строки 3) смещается вверх на 12px. Хотя текст блока "inner" тоже сместился вверх, он имеет относительное позиционирование так, что он лежит в положении нормального размещения в конце строки 2.

В нижеследующем элементе PRE каждая строка в 24 px имитируется двумя строками, вторая начинается с соответствующего номера. Строки, как они появляются в изображении:

(29)                             Start 
1 Beginning of body contents.

2 of outer contents. 
(21)                     Inner contents.
3
(2)  End of outer contents.
4(20)                    End of body

5 contents.

Цвет текста по умолчанию – черный. Предложение "Start of outer contents" - красное. Фраза "Inner contents"- голубая. Предложение "End of outer contents" - красное.