Визуальное форматирование (общие сведения)

Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML -документа. Кроме этого обязательно учитывается расположение уже отображенных элементов и элементов-контейнеров, в которых могут содержаться отображаемые элементы. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например, два последовательных абзаца следуют друг за другом, причем каждый начинается с новой строки.

Однако в некоторых случаях при создании Web -страницы требуется изменить естественный порядок отображения элементов. В этом случае можно воспользоваться свойством position элемента, которое позволяет определить способ его позиционирования на странице. Это свойство задает один из способов расположения элемента на странице:

• статический,
• относительный или
• абсолютный.

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

Работу этих способов можно представить следующим образом. Элементы, которые нужно разметить на Web -странице, можно представить в виде очереди, из которой браузер берет по одному элементу и размещает в соответствии с заданными параметрами. Статический способ, используемый по умолчанию, не изменяет принятых установок браузера в отношении расположения элементов Web -страницы. Относительный способ похож на статический, только здесь можно сместить следующий элемент относительно предыдущего. Абсолютный способ исключает элемент из очереди и отображает его в соответствии с указанными параметрами.

Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента и значений его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.

Рассмотрим более подробно эти способы позиционирования.

Абсолютное позиционирование

Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причем сам элемент или его потомки могут перекрывать ранее отображенные элементы. Чтобы определить точку отсчета местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение левой верхней вершины блока этого элемента и будет точкой отсчета для абсолютно позиционированного элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдет до элемента < BODY>, то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент. Следующий HTML -документ иллюстрирует абсолютное позиционирование элемента:

< HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: static; background-color: #90EE90" > Родитель, позиционированный статически! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>

Рис.1. Абсолютное позиционирование

На рисунке 1 показано отображение страницы с абсолютно позиционированным элементом (графическим изображением буквы Ж) в тэге < SPAN>.

Так как в исходном документе родитель (тэг < SPAN> ) элемента < IMG>, позиционированного абсолютно, является статически позиционированным элементом, то ищется ближайший абсолютно позиционированный родитель. Таковым будет тело документа, относительно начала которого и смещается вправо и вниз на 40 пикселей изображение. Если к этому фрагменту добавить один абзац, то элемент < SPAN> сместится вниз, но его потомок - элемент < IMG> - все равно будет позиционирован относительно начала документа (рисунок 2), что приводит к перекрытию изображением родителя.

Рис.2. Абсолютное позиционирование от начала документа

Вот текст приложения:

< HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < P> Абзац 1< P> < SPAN STYLE=" position: static; background-color: #90EE90" > Родитель, позиционированный статически! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>

Если теперь изменить позиционирование родителя на относительное, то элемент < IMG> будет смещен вниз и вправо относительно начала элемента-родителя (рисунок 3).

Рис.3. Абсолютное позиционирование от начала родителя

Вот текст документа:

< HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: relative; background-color: #90EE90" > Родитель, позиционированный относительно! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>

А если добавить перед элементом < SPAN> абзац, то изображение сместится вместе со своим родителем, оставаясь расположенным на 40 пикселей вниз и вправо относительно начала элемента-родителя (рисунок 4).

Рис.4. Смещение абсолютно позиционированного элемента вместе с родителем

Замечание. Изменение размеров окна браузера не изменит положение абсолютно позиционированного элемента. Поэтому при уменьшении размеров окна такой элемент может оказаться за границами окна и, следовательно, невидим.

Абсолютное позиционирование

Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя:

• left - для задания расстояния в пикселях от левого края окна ( х -координата),
• top - для задания расстояния в пикселях от верхнего края окна ( у -координата).

Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.

Проиллюстрируем это на конкретном примере. Возьмем текст примера, результат просмотра которого в браузере приведен на предыдущем шаге на рисунке 3, и изменим его следующим образом:

< HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: relative; background-color: #90EE90" > Родитель, позиционированный относительно! < IMG SRC=" G.gif" STYLE=" position: absolute; top: auto; left: auto; " > < /SPAN> < /BODY> < /HTML>

Результат просмотра этого документа в браузере изображен на рисунке 1.

Рис.1. Изменение положения абсолютно позиционированного при отсутствии параметров top и left

⇐ Предыдущая123

Поделиться: