3 Позиционирование блоков
В CSS блок может размещаться согласно трем схемам позиционирования:
1. Нормальный поток. В CSS модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.
Примечание. Схемы позиционирования, разработанные в CSS, помогают разработчикам делать свои документы более доступными, избавляя разработчиков от необходимости использовать различные приемы разметки (например, невидимые изображения) для управления отображением документа.
При отображении документа элементы HTML выводятся последовательно друг за другом по мере их следования в тексте документа. Детальное расположение элементов определяется самим браузером. Однако в CSS существуют и специальные средства, позволяющие располагать элементы в произвольном месте страницы. К ним относится свойство position
Свойства position и float определяют алгоритм позиционирования CSS2, используемый для определения положения блока.
'position'
-
Значение:
static | relative | absolute | fixed | inherit
Начальное значение:
static
Область применения:
все элементы, кроме генерируемого содержимого
Наследование:
нет
Процентное задание:
N/A
Устройства:
визуального форматирования
Значения этого свойства:
static
статический способ позиционирования – подразумевает естественный вывод элемента в общем потоке всех элементов в соответствии с их иерархией и делением на блочные и встроенные (встроенные элементы выводятся в строке друг за другом вдоль координаты х, пока не закончится строка, осуществляя затем переход на следующую, а блочные – друг под другом вдоль координаты у). Статичность в данном случае подразумевает неизменность в потоке вывода. Используется по умолчанию. Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства left и top не применяются.
relative
относительное позиционирование подразумевает, что элементы-потомки размещаются относительно родительского элемента, который может быть позиционирован как статически, так и абсолютно. Отсчет ведется от левого верхнего угла родительского блока.
absolute
абсолютное позиционированные элементы изымаются из общего потока вывода и размещаются в указанном месте на странице. Размещаемый элемент может перекрывать другие. Отсчет ведется оот левого верхнего угла документа (элемент <body>). При прокрутке всей страницы этот угол перемещается, а с ним «уплывает» и абсолютно «привязанный» элемент. Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются ни с какими другими полями.
fixed
используется как absolute. Разница в том, что элемент «привязывается« к углу окна, а не элементы <body>, которые совпадают лишь до начала прокрутки. Элемент, «привязанный» как fixed, остается фиксированным на экране и не прокручивается.
Говорят, что элементу была присвоена позиция, если для свойства 'position' устанавливается значение, отличное от 'static'. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств:
'top'
-
Значение:
<длина> | <проценты> | auto | наследуемое
Начальное значение:
auto
Область применения:
позиционируемые элементы
Наследование:
нет
Процентное задание:
относительно высоты контейнера
Устройства:
визуального форматирования
Это свойство задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.
'right'
-
Значение:
<длина> | <проценты> | auto | наследуемое
Начальное значение:
auto
Область применения:
позиционируемые элементы
Наследование:
нет
Процентное задание:
относительно к ширины контейнера
Устройства:
визуального форматирования
Это свойство задает смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.
'bottom'
-
Значение:
<длина> | <проценты> | auto | наследуемое
Начальное значение:
auto
Область применения:
позиционируемые элементы
Наследование:
нет
Процентное задание:
относительно высоты контейнера
Устройства:
визуального форматирования
Это свойство определяет смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.
'left'
-
Значение:
<длина> | <проценты> | auto | наследуемое
Начальное значение:
auto
Область применения:
позиционируемые элементы
Наследование:
нет
Процентное задание:
относительно ширины контейнера
Устройства:
визуального форматирования
Это свойство определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.
Значения этих четырех свойств имеют следующий смысл:
<длина>
Смещение задается фиксированным значением расстояния от исходной краевой линии.
<проценты>
Смещение задается процентным соотношением относительно ширины (для свойств 'left' и 'right') или высоты (для свойств 'top' и 'bottom') контейнера. Если высота контейнера не указана точно (т.е. зависит от высоты содержимого), то процентное соотношение, определяющее значение свойств 'top' и 'bottom', интерпретируется как значение 'auto'.
auto
Действие данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение 'auto'. Подробную информацию можно найти в разделах, посвященных ширине и высоте абсолютно позиционируемых и неперемещаемых элементов.
Для абсолютно позиционируемых блоков смещение осуществляется относительно контейнера. Для относительно позиционируемых блоков смещение осуществляется относительно внешней краевой линии самого блока (сначала блоку присваивается положение в нормальном потоке, а затем с использованием названных свойств указывается смещение относительно этого положения).