Здравствуйте!
Мы продолжаем рассматривать системы позиционирования.
И в этом видео я расскажу вас о системе, которая называется «абсолютная».
Для того чтобы задать абсолютную систему позиционирования элементу,
нужно свойству position задать значение absolute.
При таком позиционировании блок выводится из потока,
но при этом сам образует новый содержащий блок.
Содержащим блоком для position absolute элементов
является ближайший предок со свойствами position'а relative, absolute или fixed.
О значении fixed я расскажу вам в следующем видео.
Такие элементы как inline, inline-block, display-table,
display-row и так далее, начинают вести себя как блочные элементы.
У абсолютно спозиционированных элементов не схлапываются внешние отступы,
в отличие от системы позиционирования static или relative.
Итак, разберем пример.
У нас есть блог с классом wrap, и внутри есть два box'а: box1 и box2.
Зададим position absolute элементу box, элементу с классом box.
Что мы видим?
Элементы остались на той же строке, но почему-то второй блок куда-то исчез.
Что произошло?
Когда мы установили свойство position absolute,
box1 — он вырвался из потока, соответственно, место освободилось.
box2 поднялся выше и тоже вырвался из потока.
Тем самым box1 находится под box2.
Рассмотрим следующий пример.
Зададим элементу с классом box свойство position: absolute; top: 0; left: 0.
Как я уже говорил ранее, то элементы position: absolute позиционируются
относительно первого предка, у которого свойство position не равно static.
Если такого нет, то позиционируются относительно корневого элемента.
Как и в это этом примере, можно увидеть, что так как у родительского элемента не
задано свойство position, отличное от static,
то элемент начинает позиционироваться относительно корневого элемента.
И свойство top и left указывают координаты,
куда должен установиться элемент.
Если мы зададим родителю свойство position: relaive,
то элемент начинает позиционироваться относительно него и устанавливается
в левый верхний угол, потому что задано свойство top: left со значением 0.
Рассмотрим следующий пример.
У нас есть два box'а: box1 и box2.
box1 задаем свойства position: absolute; right: 0, bottom: 0.
box2 задаем свойства position: absolute; top: 0; left: 0.
Что мы видим?
box1 находится в правом нижнем углу, а box2 находится в левом верхнем углу.
Если мы зададим все четыре свойства — top, right, bottom и left,
— то блок растянется.
Почему так происходит?
На самом деле, блок должен заполнять все пространство,
за вычетом отступов и смещений.
Так вот, у нас есть содержащий блок wrapper, внутри есть блок, у
которого указано смещение, то есть ширина рассчитывается автоматически, то есть это
ширина содержащего блока, минус отступы, то есть top, right, bottom и left.
Это получается ширина самого блока.
Если мы зададим еще дополнительно отступы margin'ы,
то ширина рассчитывается автоматически и тем самым становится еще меньше.
Если мы зададим ширину, то значение right проигнорируется.
Если мы зададим высоту, то значение bottom проигнорируется и блок
будет позиционироваться в левом верхнем углу с учетом отступов и margin'ов.
Для свойств, которые задают смещение, можно указывать значение в процентах.
В этом случае значение будет рассчитываться относительно
содержащего блока.
Например, у нас есть два box'а: box1 и box2.
У первого box'а мы указываем свойство right и bottom 50 %,
box2 указываем свойству top и left значение в 50 %.
box1 левым верхнем углом устанавливается в левый верхний угол содержащего блока.
А правый нижний угол устанавливается ровно посередине содержащего блока,
потому что у него указано свойство right и bottom 50 %, то есть ровно посередине.
У box2 левый верхний угол установлен тоже ровно посередине,
потому что указано свойство top и left со значением 50 %.
То есть значение рассчитывается от ширины и высоты содержащего блока.
Блоки растянулись, поскольку у них указаны все четыре свойства.
Размеры в абсолютной системе позиционирования рассчитываются следующим
образом: если не задана ширина или высота, то размер бокса будет по содержимому.
Если указаны координаты или отступы, то размер рассчитывается следующим
образом: берется размер содержащего блока — возьмем для примера ширину,
— и их этой ширины вычитаются отступы и смещения.
Если ширина и высота заданы в процентах, то размер рассчитывается
относительно содержащего блока, независимо от того, заданы они или нет.
Padding'и и margin'ы рассчитываются всегда от ширины содержащего блока.
Хочу заметить, что вертикальные padding'и
и margin'ы тоже рассчитываются от ширины содержащего блока.
В этом видео вы узнали об абсолютной системе позиционирования и как элементы
ведут себя в этой системе.
В следующем видео я расскажу вам об оставшихся двух системах позиционирования.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
