Позиционирование
Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учётом их положения в структуре документа и расоложения предыдущтх отображённых элементов и элементов-контейнеров, в которых они могут содержаться. При компановке страницы используются установки браузера для определения положения каждого элемента. Например два последовательных абзаца следуют друг за драгом, причём каждый начинается с новой строки.
Свойство position элемента позволяет определить способ его позиционирования на странице: статический , относительный или абсолютный . Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместит его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.
Значения static , relative и absolute свойства position определяет соответствующий способ позиционирования элемента, который, в конечном счёте, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значением его свойств top и left . Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента (см. " Модель элемента ") .
Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы.
Чтобы определить точку отсчёта местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение верхней границы блока этого элемента и будет точкой отсчёта для абсолютного позиционирования элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдёт до элемента <BODY> , то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент.
Следубщий фрагмент HTML иллюстрирует абсолютное позиционирование элемента:
Образец действия кода здесь.
Так как в исходном фрагменте, элемент <IMG> позиционирован абсолютно, а его родитель ( <SPAN> ) позиционирован статически, то ищется ближайший абсолютно позиционированный родитель. Таковым будет тело документа, относительно начала которого и смещается вправо и вниз на 60 пикселов изображение. Если к этому фрагменту добавить один абзац, то элемент <SPAN> сместится вниз, но его потомок - элемент <IMG> - всё равно будет позиционирован относительно начала документа, что приводит к перекрытию изображением родителя. Образец действия нового HTML-кода здесь.
Если теперь изменить позиционирование родителя на относительное, то элемент <IMG> будет смещён вниз и вправо относительно начала элемента-родителя. Образец действия нового кода здесь.
Примечание
Изменение размеров окна браузера не изменит положение абсолютно позиционированного элемента. Поэтому при уменьшении размеров окна такой элемент может оказаться за границами окна и, следовательно, не видим.
Ещё два параметра, влияющие на отображение абсолютно позиционированного элемента, - это свойство width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается самостоятельно в своём собственном прямоугольном блоке, левый угол которого помещается в определённую точку окна браузера. Свойства width и height задают ширину и высоту этого блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали - на столько, на сколько необходимо для отображения содержимого элемента. Установка значений свойств width и height гораничевает размеры блока абсолютно позиционированного элемента. Если его содержимое не помещяатся в блок заданного размера, то оно просто не видимо пользователю. Динамическим изменением размеров блока можно сделать так, что будет видно всё содержимое элемента.
Относительное позиционирование
Относительно позиционированые и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего.
Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя.
Код последовательности относительно позиционированных элементов страницы:
Образец действия этого кода здесь.
Каждый элемент потока позиционируется в конец предыдущего. Если позиционирование элемента-изображения изменить на абсолютное, то он будет выведен из стандартного потока отображения, а оставшиеся относительно позиционируемые элементы будут отображаться друг за другом в едином потоке. Образец здесь. Здесь видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше треьего элемента и перекрывается последним.
До сих пор мы не задавали значения свойств top и left относительно позиционируемых элементов. Если для какого-либо элемента из стандартного потока определены значения этих свойств, то этот элемент смещается вниз и вправо на заданные величины относительно правого верхнего угла блока предыдущего элемента в потоке, а следующий элемент отображается так, как будто предыдущий смещённый элемент остаётся несмещённым. Образец здесь.
Статическое позиционирование
В стандартном потоке статически позиционированнные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке. Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top и left , и тем самым сместить их.