Создание свободно позиционируемых элементов

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

Самый важный атрибут стиля — position. Он задает способ позиционирования элемента Web-страницы:

position: static|absolute|relative|fixed|inherit

Этот атрибут стиля может принимать четыре значения:

- static — контейнер непозиционируемый (поведение по умолчанию);

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

- relative — элемент Web-страницы относительно позиционируемый. Его координаты отсчитываются относительно точки, в которой он находился бы, если был непозиционируемым. На Web-странице выделяется место под такой элемент;

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

Пример:

#search { position: absolute }

Здесь мы превратили контейнер search в свободно позиционируемый.

Атрибуты стиля left и top задают, соответственно, горизонтальную и вертикальную координаты верхнего левого угла свободно, относительно или фиксированно позиционируемого элемента Web-страницы:

left|top: <значение>|auto|inherit

Значения координат можно указывать в любых единицах измерения, поддерживаемых стандартом CSS (см. табл. 8.1). Значение auto возвращает управление соответ-ствующей координатой Web-обозревателю.

В примере из листинга 16.22 мы задали координаты и размеры контейнера search.