Создание свободно позиционируемых элементов
Свободные элементы 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-обозревателю.
В примере из листинга 21.1 мы задали координаты и размеры контейнера search.
Дата добавления: 2015-05-08; просмотров: 722;