Применение каскадных таблиц стилей (CSS)

       

Абсолютные координаты


При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно:


Рис. 12.5.  Абсолютные координаты

Если в этой системе координат некоторый блочный элемент должен быть размещен на 10 px ниже верхнего обреза рабочей области браузера и на 20 px правее левого края рабочей области браузера, то его описание будет выглядеть следующим образом:

.example { position:absolute;top:10px; left:20px; }

В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20 px), координата Y - атрибутом top (значение - 10 px).

Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат. (открыть)


Рис. 12.6.  Абсолютные координаты

Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами   100 px (высота) на 200 px (ширина), достаточно позиционировать его следующим образом: (открыть)

.example { position:absolute; top:-100px;left:-200px; width:200px;height:100px; }


Рис. 12.7.  Абсолютные координаты

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



Содержание раздела