Свободные элементы 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.