На этом шаге мы приведем общие сведения, касающиеся позиционирования элементов.
Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-документа. Кроме этого обязательно учитывается расположение уже отображенных элементов и элементов-контейнеров, в которых могут содержаться отображаемые элементы. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например, два последовательных абзаца следуют друг за другом, причем каждый начинается с новой строки.
Однако в некоторых случаях при создании Web-страницы требуется изменить естественный порядок отображения элементов. В этом случае можно воспользоваться свойством position элемента, которое позволяет определить способ его позиционирования на странице. Это свойство задает один из способов расположения элемента на странице:
- статический,
- относительный или
- абсолютный.
Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.
Работу этих способов можно представить следующим образом. Элементы, которые нужно разметить на Web-странице, можно представить в виде очереди, из которой браузер берет по одному элементу и размещает в соответствии с заданными параметрами. Статический способ, используемый по умолчанию, не изменяет принятых установок браузера в отношении расположения элементов Web-страницы. Относительный способ похож на статический, только здесь можно сместить следующий элемент относительно предыдущего. Абсолютный способ исключает элемент из очереди и отображает его в соответствии с указанными параметрами.
Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента и значений его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.
Рассмотрим более подробно эти способы позиционирования.
На следующем шаге мы рассмотрим абсолютное позиционирование.
