Позиционирование элементов документа html
Способ воспроизведения элементов
Относительное позиционирование
Способ воспроизведения элементов
Свойство display позволяет задать способ воспроизведения элемента html-страницы.
- Значение block заставляет отображать элементы в виде объектов уровня блока. Такие объекты отделяются от остальных элементов страницы пустыми строками. Этим значением пользуются в тех случаях, когда надо воспроизвести элементы (графика, гиперссылки) на отдельных строках страницы.
- Значение inline трактует элементы как встроенные объекты. Такие объекты размещаются на тех же строках страницы, что и соседние. Этим значением пользуются тогда, когда надо принудительно разместить элементы уровня блока (заголовки, например) в общем потоке данных.
- Значение list-item служит для придания объекту статуса элемента списка. Такие объекты воспроизводятся как элементы списка, снабженные маркерами.
- Значение none скрывает все элементы страницы, описанные с помощью определенного дескриптора. В этом случае соседние элементы сдвигаются, занимая место скрытых.
Разрыв html-страницы
Для указания места разрыва страницы при печати документа используются свойства page-break-before, page-break-after со значениями always, avoid.
Свойство page-break-before со значением always указывает браузеру располагать символы разрыва страницы перед каждым элементом, описанным с помощью конкретного дескриптора. Так, например, при использовании этого свойства в определении стиля для тэга Н3 браузер будет печатать разделы документа, начинающиеся с заголовка Н3 на новой странице.
Свойство page-break-after со значением always указывает браузеру располагать символы разрыва страницы после элемента.
Для предотвращения вставки браузером символов разрыва страницы перед или после определенных элементов, надо использовать те же свойства, но со значением avoid.
Относительное позиционирование
Для относительного позиционирования элементов Вэб-страницы служит свойство position со значением relative. При этом браузер не влияет на положение других элементов Вэб-страницы.
Для указания направления смещения служат свойства top, bottom, left, right.
Величину смещения можно задавать в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании смещения при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
Пример:
|
HTML-код: <style>
p.rel{position:relative;bottom:27px;left:1px;color:red}
</style>
...
<p>Пример относительного позиционирования</p>
<p class="rel">Пример относительного позиционирования</p>
|
Отображение в браузере: Пример относительного позиционирования Пример относительного позиционирования |
Абсолютное позиционирование
Для абсолютного позиционирования элементов Вэб-страницы служит свойство position со значением absolute. При этом браузер "вырывает" элементы абсолютного позиционирования из общего контекста страницы, причем соседние элементы сдвигаются, занимая "освободившееся" пространство.
Для указания направления отсчета координат элемента относительно сторон "родительского" объекта (обычно Вэб-страницы) служат свойства top, bottom, left, right. Например, при задании свойства top, отсчет будет вестись от верхней границы.
Величину абсолютных координат можно задавать в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании координат при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
После операций связанных с абсолютным или относительным позиционированием возможно возникновение эффекта взаимного наложения объектов Вэб-страницы. Свойство z-index позволяет задать уровень приоритета воспроизведения перекрывающихся объектов и допускает задания положительных и отрицательных значений. Чем больше z-index, тем "выше" лежит объект в стопке всех объектов, положение которых менялось средствами позиционирования.
