Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > CSS учебник > Position в CSS

Position в CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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