Основы 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устанавливает значение аналогичного свойства родительского блока.