Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учётом их положения в структуре документа и расоложения предыдущтх отображённых элементов и элементов-контейнеров, в которых они могут содержаться. При компановке страницы используются установки браузера для определения положения каждого элемента. Например два последовательных абзаца следуют друг за драгом, причём каждый начинается с новой строки.
Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный. Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместит его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.
Значения static, relative и absolute свойства position определяет соответствующий способ позиционирования элемента, который, в конечном счёте, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значением его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента (см. "Модель элемента").
Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы.
Чтобы определить точку отсчёта местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение верхней границы блока этого элемента и будет точкой отсчёта для абсолютного позиционирования элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдёт до элемента , то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент.
|
