CSS позволяет перемещать любой элемент с помощью свойства float.
p{float:right;}
Свойство floatимеет значения left,hight и none.
Следующие правило,заданное свойством clear,гарантирует ,что все элементы h3 будут смещены ниже всех перемещаемых влево элементов,а появление перемещаемых элементов справа разрешено.
h3{clear:left;}
Чтобы гарантировать отсутствие любых перемещаемых элементов в одной строке с элементами h3,зададим значение both:
h3{clear:both;}
Соответствено ,если надо побеспокоиться о расположении элементов h3 относительно перемещаемых вправо элементов,то пишем:
h3{clear:right;}
Типы позиционирования
static-блок элемента генерируется соответственно нормальному потоку.
relative-блок элемента смещается на некоторое расстояние.
absolute-блок элемента полностью удаляется из потока документа.
fixed-блок элемента абслоютно позиционирован.
Свойства смещения
top-описывает,насколько должен отстоять верхний край поля позиционируемого элемента от верха его блока-контейнера.
left-описывает,насколько вправо(для положительных значений) отстоит левыый край поля позиционируемого элемента отнсительно левого края блока-контейнера.
Ширина и высота
Задаются в помощью свойств width и height.Иногда данные свойства задавать нет необходимости.
Так,если размещение четырех сторон элемента описывается свойствами top,right,bottom и left,то высота и ширина элемента определяется смещением.
Также существуют свойства минимума-максимума.
Для области содержимого можно задать минимальные размеры с помощью свойств min-width и min-height.Аналогично размеры элемента могут быть ограничены свойствами max-width и max-height.
Переполнение содержимого
Предположим,что содержимое, некоторого элемента, в него не помещается. Тогда для исправления данной ситуации применяется свойство overflow.
visible-означает,что содержимое элемента будет видимым вне блока элемента (задается по умолчанию).
p{positpion:absolute;background:yellow;}
overflow:visible;}
Властитель слабый и лукавый,плешивый щеголь,враг труда,нечаянно пригретый славой,над нами царствовал тогда
scroll-содержимое отсекается и появляется полоса прокрутки
p{positpion:absolute;background:yellow;
overflow:scroll;}
Властитель слабый и лукавый,плешивый щеголь,враг труда,нечаянно пригретый славой,над нами царствовал тогда
hidden-содержание элемента отсекается краями блока элемента и интерфейс прикрутки не предоставляется.p{positpion:absolute;background:yellow;
overflow:hidden;}
Властитель слабый и лукавый,плешивый щеголь,враг труда,нечаянно пригретый славой,над нами царствовал тогда
auto-агенты пользователя сами определяют какое поведение выбрать.Отсечение содержимого
clip-данное свойство изменяет форму области отсечения.
rect-задания прямоугольной формы.Синтаксис:rect(top,right,bottom,left)
clip:rect(0,20px,20px,0)
Абсолютно позиционированный элемент полностью удаляется из потока документа.Данный элемент не обтекает содержимое других элементов, и их содержимое не обтекает позиционированный элемент.Это означает, что абсолютно позиционированный элемент может перекрывать другие элементы или быть прекрытым ими.
Блок-контейнер абсолютно позиционированного элемента-это ближайший элемент-предок,значение свойства position которого отлично от static.Обычно задается значение relative без смещений.
p{position:relative;}
