Relative

Static

Позиционирование блоков

В CSS блок может размещаться согласно трем схемам позиционирования:

1. Нормальный поток. В CSS модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.

2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.

3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.

Примечание. Схемы позиционирования, разработанные в CSS, помогают разработчикам делать свои документы более доступными, избавляя разработчиков от необходимости использовать различные приемы разметки (например, невидимые изображения) для управления отображением документа.

При отображении документа элементы HTML выводятся последовательно друг за другом по мере их следования в тексте документа. Детальное расположение элементов определяется самим браузером. Однако в CSS существуют и специальные средства, позволяющие располагать элементы в произвольном месте страницы. К ним относится свойство position

Свойства position и float определяют алгоритм позиционирования CSS2, используемый для определения положения блока.

'position'

Значения этого свойства:

статический способ позиционирования – подразумевает естественный вывод элемента в общем потоке всех элементов в соответствии с их иерархией и делением на блочные и встроенные (встроенные элементы выводятся в строке друг за другом вдоль координаты х, пока не закончится строка, осуществляя затем переход на следующую, а блочные – друг под другом вдоль координаты у). Статичность в данном случае подразумевает неизменность в потоке вывода. Используется по умолчанию. Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства left и top не применяются.

относительное позиционирование подразумевает, что элементы-потомки размещаются относительно родительского элемента, который может быть позиционирован как статически, так и абсолютно. Отсчет ведется от левого верхнего угла родительского блока.