Upload
n1zze
View
321
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Основы CSSПозиционирование
Позиционирование — одно из ключевых понятий в блочной верстке.
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.
Cтатическое позиционирование. (position: static;)
▪ По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.
▪ Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.
▪ Свойства left, top, right, bottom если определены, игнорируются.
Относительное позиционирование. (position:relative;)
▪ Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Абсолютное позиционирование. (position: absolute;)
▪ При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера.
Фиксированное позиционирование (position: fixed)
▪ Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottomточке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.
▪ Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю.
position:relative + position:absolute
▪ Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ.
CSS свойство float
▪ Это CSS свойство позволяет определять сторону окна документа, относительно которой будет выравниваться форматируемый элемент веб-страницы. Такое выравнивание подразумевает обтекание (float) смещаемого элемента другими, соседними элементами с противоположной стороны. Свойство float может принимать значения, указанные ниже:
left — элемент прижимается к левой границе окна документа, с обтеканием соседними элементами с правой стороны.
right — элемент прижат к правой части и обтекается соседними с левой стороны.
none — отмена обтекания элемента (установлено по умолчанию).
inherit — значение этого свойства наследуется от родительского элемента.
CSS свойство float
▪ Обтекаемые объекты страницы автоматически получают статус блочных элементов. И для них необходимо либо явно, либо в косвенном виде указывать значение свойства, определяющего их ширину (width). В противном случае существует опасность того, что плавающий элемент захватит всю ширину родительского блока, что не позволит добиться желаемого эффекта обтекания.
▪ Чтобы отменить обтекание смещенного элемента необходимо применить свойство clear для следующего элемента, который уже не должен участвовать в обтекании. Причем значения данного свойства позволяют отменять правое, левое и оба обтекания одновременно: left,right, both. Значение none отменяет предыдущие установки свойства clear и условия обтекания элемента определяются значением свойства float. А значение inheritустанавливает значение аналогичного свойства родительского блока.