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 инструменте — псевдо-классах.