- •Элемент title
- •Метаданные
- •Элемент meta
- •Meta и заголовки http
- •Meta и поисковые машины
- •Тело документа Элемент body
- •Элементы построения таблиц Элемент table
- •Строки таблицы: элемент tr
- •Ячейки таблицы: элементы th и td
- •Группы строк: элементы thead, tfoot и tbody
- •Группы столбцов: элементы colgroup и col
- •Элемент colgroup
- •Элемент col
- •Внешние ссылки
- •Ссылки на разделы текущей страницы
- •Ссылки на страницы своего сайта
- •Атрибуты ссылок
- •Общие атрибуты тегов
- •Таблицы стилей.
- •Виды селекторов:
- •1. Внутренние таблицы стилей.
- •2. Глобальные таблицы стилей.
- •3. Связанные таблицы стилей.
- •14. Свойства таблиц стилей
- •1. Свойства шрифта.
- •2. Свойства цвета и фона.
- •3. Свойства текста.
- •4. Свойства, связанные с размером и рамкой.
- •15. Позиционирование объектов в документе.
15. Позиционирование объектов в документе.
Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учётом их положения в структуре документа и расположения предыдущих отображённых элементов и элементов-контейнеров, в которых они могут содержаться. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например два последовательных абзаца следуют друг за другом, причём каждый начинается с новой строки.
Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный. Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместит его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.
Значения static , relative и absolute свойства position определяет соответствующий способ позиционирования элемента, который, в конечном счёте, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значением его свойств top и left . Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента
Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы.
Чтобы определить точку отсчёта местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение верхней границы блока этого элемента и будет точкой отсчёта для абсолютного позиционирования элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдёт до элемента <BODY> , то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент.
Ещё два параметра, влияющие на отображение абсолютно позиционированного элемента, - это свойство width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается самостоятельно в своём собственном прямоугольном блоке, левый угол которого помещается в определённую точку окна браузера. Свойства width и height задают ширину и высоту этого блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали - на столько, на сколько необходимо для отображения содержимого элемента. Установка значений свойств width и height гораничевает размеры блока абсолютно позиционированного элемента. Если его содержимое не помещяатся в блок заданного размера, то оно просто не видимо пользователю. Динамическим изменением размеров блока можно сделать так, что будет видно всё содержимое элемента.
Относительное позиционирование
Относительно позиционирование и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего.
Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя.
<html> <head>
<title>Позиционирование</title> </head>
<body> <span style="position: relative; background-color: gray;"> Это изображение </span>
<img src="../images/cat.jpg" style="position: relative;" >
<span style="position: relative; background-color: lightgrey;"> является изображением кота. </span>
</body> </html>
Каждый элемент потока позиционируется в конец предыдущего. Если позиционирование элемента-изображения изменить на абсолютное, то он будет выведен из стандартного потока отображения, а оставшиеся относительно позиционируемые элементы будут отображаться друг за другом в едином потоке. Образец здесь. Здесь видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше треьего элемента и перекрывается последним.
До сих пор мы не задавали значения свойств top и left относительно позиционируемых элементов. Если для какого-либо элемента из стандартного потока определены значения этих свойств, то этот элемент смещается вниз и вправо на заданные величины относительно правого верхнего угла блока предыдущего элемента в потоке, а следующий элемент отображается так, как будто предыдущий смещённый элемент остаётся несмещённым. Образец здесь.
Статическое позиционирование
В стандартном потоке статически позиционированнные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке. Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top и left , и тем самым сместить их.