0:00
Здравствуйте!
На этой неделе я расскажу вам о том,
какие системы позиционирования используются в верстке.
В этом видео я расскажу вам об относительной системе позиционирования.
Итак, свойство 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 это граница контента
ближайшего предка блочного уровня.
И относительно спозиционированные блоки создают новый содержащий
блок для других систем позиционирования.
В этом видео я рассказал вам о том,
как работает относительная система позиционирования и о том, как задавать
смещения и как считаются размеры в относительной системе позиционирования.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
