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