HTML, Excel, Word, SEOОсновы Html ⇒ Позиционирование элементов документа html

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений

Популярный клуб Вулкан Россия приглашает поучаствовать в новом турнире

Позиционирование элементов документа html

Способ воспроизведения элементов

Разрыв страницы

Относительное позиционирование

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

Способ воспроизведения элементов

Свойство display позволяет задать способ воспроизведения элемента html-страницы.

Разрыв 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, тем "выше" лежит объект в стопке всех объектов, положение которых менялось средствами позиционирования.



В начало страницы



В начало страницы