Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

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

 

Списки в CSS
Классы в CSS
       

Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение