Position в CSS

«Position в CSS» – шестой урок учебника CSS. В этом уроке речь пойдет об использовании методов CSS позиционирования.

CSS позиционирование является мощнейшим инструментом форматирования информации, расположенной на странице. Position в CSS позволяет:

расположить элемент в любом месте на странице
расположить элемент в любом месте относительно другого элемента
расположить несколько элементов друг за другом и определить им приоритет отображения
определить правила отображения текста при переполнении какого–либо элемента

Position в CSS - основные параметры.

Position – позволяет определить способ позиционирования элемента:

static – позиционирование не применяется. Элемент статичен.
relative – позиционирование будет производиться относительно нормального положения элемента на странице.
absolute – позиционирование элемента будет производиться в абсолютных величинах. Начало оси координат располагается в левом верхнем углу. Ось x направленна вправо, ось y – вниз.
fixed – задает жесткую позицию элемента. Тоесть при прокрутке страницы элемент будет прокручиваться тоже, сохраняя свою позицию, относительно окна браузера.

Bottom – задает положение нижнего края элемента:

auto – браузер выставляет нижнюю позицию самостоятельно
% – позиция задается в процентном отношении от нижнего края окна
length – нижняя позиция задается в пикселах, также допускаются отрицательные значения

Left – задает положение левого края элемента:

auto – браузер выставляет левую позицию самостоятельно
% – позиция задается в процентном отношении от левого края окна
length – левая позиция задается в пикселах, также допускаются отрицательные значения

Right – задает положение правого края элемента:

auto – браузер выставляет правую позицию самостоятельно
% – позиция задается в процентном отношении от правого края окна
length – правая позиция задается в пикселах, также допускаются отрицательные значения

Top – задает положение верхнего края элемента:

auto – браузер выставляет верхнюю позицию самостоятельно
% – позиция задается в процентном отношении от верхнего края окна
length – верхняя позиция задается в пикселах, также допускаются отрицательные значения

Примеры позиционирования элементов:

.p1 { top : – 15%; left : 40%; position : relative; }
.p2 { position : static; top : 35%; left: 35%; }
.p3 { left:90%; top:40%; position : fixed; }
.p4 { left: – 80px; top: 200px; position : absolute; }

Дополнительные параметры позиционирования:

Vertical – align – позволяет задать выравнивание элемента по вертикали:

baseline – элемент выравнивается по родительскому элементу.
sub – элемент выравнивается, как нижний индекс.
super – элемент выравнивается, как верхний индекс.
top – элемент выравнивается по уровню самого высокого элемента в строке
text – top – вершина элемента выравнивается по вершине шрифта родительского элемента.
middle – элемент выравнивается по середине.
bottom – элемент выравнивается по уровню самого низкого элемента.
text – bottom – нижняя часть элемента выравнивается по размеру самой маленькой буквы текста.
% – выравнивает элемент в % от значения параметра "line – height". Допускаются отрицательные значения.

Overflow – задает инструкции, выполняемые в случае переполнения элементом допустимой области родительского элемента:

visible – содержимое будет выводиться даже в случае переполнения
hidden – содержимое будет обрезанно по границе допустимого заполнения
scroll – содержимое будет обрезанно по границе допустимого заполнения, но браузер создаст полосу прокрутки для просмотра содержимого целиком
auto – ситуация будет определена браузером

z – index – задает уровень приоритета элемента, что позволяет располагать одни элементы позади других.

Значения z – index могут быть отрицательными.

Position в CSS - действительно многофункциональный и замечательный элемент разметки. Используя позиционирование можно создавать замечательный графический дизайн для сайта, подгоняя элементы друг к другу с хирургической точностью. Но спешу вас предупредить, не размещайте элементы за пределами видимости страницы, тем более если это ссылки. Такая манипуляция может вызвать жестокие санкции, ведь данный метод относится к черным методам оптимизации.

В следующем уроке мы поговорим об очень интересном CSS инструменте - псевдо-классах.

Наверх

Источник: Создание сайтов