Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 71 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Рис. 60
Термин "слой" вместо "блочный элемент разметки" используется здесь по той причине, что он лучше отражает эффект,
который достигается за счет позиционирования.
3.13.1. Координаты и размеры
Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузе-
ра.
CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размеще-
ния элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.
Блоки – это не абстрактные точки, которые не занимают на плоскости страницы места. Блоки представляют собой пря-
моугольники, которые "занимают" площадь. Текст и другие компоненты страницы под блоком становятся недоступны поль-
зователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем его координаты.
При использовании абсолютных координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y
направлены вправо по горизонтали и вниз по вертикали, соответственно.
Если в этой системе координат некоторый блочный элемент должен быть размещен на 10 px ниже верхнего обреза ра-
бочей области браузера и на 20 px правее левого края рабочей области браузера, то его описание будет выглядеть следую-
щим образом:
.example { position:absolute;top:10px; left:20px; }
В данной записи тип системы координат задан атрибутом position (значение – absolute), координата X задана ат-
рибутом left (значение – 20 px), координата Y – атрибутом top (значение – 10 px).
Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.
Рис. 61
Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными
размерами 100 px (высота) на 200 px (ширина), достаточно позиционировать его следующим образом (рис. 61):
.example {position:absolute; top:-100px;left:-200px; width:200px;height:100px; }
Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без
скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное расположение важно с
точки зрения дизайна, например, для использования всплывающих меню.
Относительные координаты позволяют разместить блоки на странице в координатах охватывающего их блока. Пре-
имущества такой системы координат очевидны: она позволяет сохранять взаимное расположение элементов разметки при
любом размере окна браузера и его настройках по умолчанию.
В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X
при этом направлена горизонтально вправо, а ось Y – вертикально вниз.
Чтобы задать координаты блока, в этой системе применяют запись типа (рис. 62):
<DIV STYLE="border-width:1px; border-style:solid;width:100%;height:100px;">
<DIV STYLE="position:relative;top:0px; left:0px;border-width:1px;">
Этот блок находится в точке отсчета относительных координат
</DIV>
<DIV STYLE="position:relative;top:0px; left:50px;border-width:1px;">
А этот блок смещен вправо на 50px
</DIV>
</DIV>

Страницы