Спецификация CSS2

         

Полное описание примера, иллюстрирующего абсолютное позиционирование


Диаграмма показывает действие абсолютного позиционирования бокса.

Изображено окно документа с 8 строками (пронумерованными от 1 до 8), каждая высотой 24px. Весь текст вне бокса "outer" расположен в строках 1 и 2.

Бокс "outer" позиционирован абсолютно и занимает нижнюю правую четверть окна документа. Весь текст в "outer" и его потомках занимает вторую половину строк с 5 по 8.

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

1 Beginning of body contents. End of

2 body contents.

3

4

5 Start of outer

6 contents. Inner

7 contents. End of

8 outer contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" - красный. "Inner contents" - голубой. "End of outer contents" - красный.


На диаграмме показан всплывающий бокс.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Поскольку бокс "inner" всплыл вправо, весь остальной текст обтекает вокруг него (на строках с 1 по 4).

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

1 Beginning of body contents. Start

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" - красный. "Inner contents" - голубой. "End of outer contents" - красный.



Содержание раздела