Здравствуйте! На этой неделе я расскажу вам о том, какие системы позиционирования используются в верстке. В этом видео я расскажу вам об относительной системе позиционирования. Итак, свойство position устанавливает способ позиционирования элементов относительно окна браузера или других объектов на странице. По умолчанию у свойства position установлено значение static. В этом случае элементы располагаются в нормальном потоке, то есть слева направо, сверху вниз. Это зависит от того, какого типа элемент: блочного уровня или строчного. Следующий вид позиционирования — это относительное. Задается при помощи свойства position со значением relative. В этом случае положение бокса вычисляется относительно позиции, которую он занимал бы в нормальном потоке. Для задания смещения используются свойства top, right, bottom и left. Как я уже сказал, элемент как бы занимает все то же место, но визуальная часть его смещается. Смещается на то значение, которое установлено в свойствах top, right, bottom и left. Разберем пример. Зададим нескольким элементам свойства top, right, bottom и left. Например, для смещения сверху мы указываем свойство top и задаем ему значение 10 пикселей. В этом случае элемент как бы отталкивается сверху, аналогично со свойством right, bottom и left. Также можно указать несколько смещений одновременно, например, top-left или bottom-right. В этом случае элемент смещается сверху и слева или от низа и справа. Также можно задавать отрицательные значения. В этом случае визуальная часть элемента будет смещаться в противоположном направлении. К примеру, свойство top: −10px — элемент будет смещаться вверх на 10 пикселей. А если задавать положительное значение, то он будет смещаться вниз на 10 пикселей. Ну и аналогично, если указать несколько свойств, то визуальная часть движется в противоположном направлении. Что будет, если указать сразу два смещения в противоположных направлениях, например, смещение справа и смещение слева? На самом деле, всё зависит от того, какое направление текста установлено. Если это направление слева направо, то приоритет у свойства left. Если направление текста справа налево, то приоритет у свойства right. Ну вот как на этом примере. Что же будет, если мы укажем два направления со свойством top и bottom? В этом случае приоритет всегда будет у свойства top. То есть элемент будет смещаться на то расстояние, которое указано в свойстве top. Смещение можно задавать также в процентах. Например, у нас есть два бокса, и задаем смещение на 50 % сверху и слева и снизу и справа. В этом случае сначала подействуют значения, которые смещают элемент по горизонтали, то есть left и right, а свойства top и bottom будут работать в том случае, если у родительского блока задана высота. Например, мы задаем родительскому элементу высоту в 300 пикселей. Только в этом случае визуальные части блоков начинают смещаться по вертикали. В данном случае они сместились на 150 пикселей. При относительной системе позиционирования размеры и отступы считаются следующим образом. Например, если у нас ширина не задана или значение стоит auto, то ширина считается по содержимому или занимает всё пространство, зависит от того, какого типа это блок — блочного уровня или inline уровня? Если же значение у свойства width задано в процентах, то считается от ширины родителя. Высота считается всегда по содержимому, если значение не задано. Если значение задано в процентах, то считается от высоты родителя, если его высота отлична от значения auto. Отступы, padding и margin, по всех случаях считаются от ширины родителя. Это важно понимать, когда задаются вертикальные отступы, то есть вертикальные паддинги и вертикальные марджины. Если же блок не квадратный, то можно получить довольно неожиданный эффект. Как я говорил уже ранее, что иногда считаются размеры относительно родителей, иногда каких-то других предков. Так вот, все эти блоки, относительно которых считаются система позиционирования и размеры, это называется содержащими блоками. Для корневых элементов это прямоугольники размером с вьюпорт или окно браузера, для элементов со свойством position: relative и static это граница контента ближайшего предка блочного уровня. И относительно спозиционированные блоки создают новый содержащий блок для других систем позиционирования. В этом видео я рассказал вам о том, как работает относительная система позиционирования и о том, как задавать смещения и как считаются размеры в относительной системе позиционирования.
