Позиционирование с помощью листов стилей

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

Ниже приведены наиболее часто встречающиеся свойства позиционирования.

position – определяет используемый метод позиционирования.

Значения:

absolute - в качестве точки отсчета используется верхний левый угол окна броузера, и все параметры местоположения отмеряются от него.

relative - точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было предоставлено никакой информации о местоположении.

fixed – аналогично absolute, но сам элемент фиксируется в окне броузера и при прокрутке не перемещается.

Пример: P {position: absolute}

top, right, bottom, left – определяет величину смещения от определенного края (соответственно верхнего, правого, левого и нижнего)

Пример: UL {top:20px; right: 40px}

width – определяет ширину элемента.

Пример: P{width: 300px}

height – Определяет высоту элемента.

Пример: BLOCKQUOTE {height: 300px}

line-height – определяет расстояние между базовыми линиями двух соседних строк.

Пример: BLOCKQUOTE {line-height: 2.2}

vertical-align – Определяет выравнивание текста по вертикали внутри элемента.

Значения:

middle – выравнивание средней линии элемента по базовой линии его родительского элемента;

top – выравнивание верхней части элемента по верхнему краю его текста;

bottom – выравнивание нижней части элемента по базовой линии его родительского элемента;

sub – выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента;

super – выравнивание текста элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента;

text-top – выравнивание верхней части элемента по верхней части текста родительского элемента;

text-bottom - выравнивание верхней части элемента по верхней части текста родительского элемента.

float – Определяет обтекание элемента слева или справа.

Значения:

left – элемент передвинут влево, а остальные элементы обтекают его справа;

right – элемент передвинут вправо, а остальные элементы обтекают его слева.

clear – Определяет, как данный элемент обтекается по сторонам другими элементами.

Значения:

left – элементов не должно быть слева от данного элемента;

right – элементов не должно быть справа от данного элемента;

both – элементов не должно быть справа и слева от данного элемента.

visibility – Определяет, является ли объект видимым.

Значения:

visible – элемент видим;

hidden – элемент не видим.

z-index – Определяет порядок элементов в стеке.

Значение: любое целое число – порядковый номер элемента в стеке.

cursor – Определяет, как выглядит указатель мыши при прохождении по элементу.

Значения:

crosshair – принимает форму указателя «графическое выделение»;

pointer – принимает форму указателя «выбор ссылки»;

move – принимает форму указателя «перемещение»;

text – принимает форму указателя выделения текста;

wait – принимает форму указателя «система недоступна»;

help – принимает форму указателя «выбор справки».

Пример использования позиционирования.

<P style="position:absolute; top: 150px; left: 200;width: 200px;

height: 200px; color:blue; z-index:2;" >ТЕКСТ ТЕКСТ ТЕКСТ </P>

<P style="position:absolute; top: 155px; left: 205; width: 200px; height: 200px; color:red; z-index:1; ">ТЕКСТ ТЕКСТ ТЕКСТ </P>