В этой короткой статье мы разберем как лучше позицинировать подобные блоки. how-to: позиционирование блоков

Эти изображение должны быть отдельными блоками так как в каждом из них при наведении будет проигрываться видео.

1. Неправильный способ

Имеется div.hero_picture который висит абсолютом и растянут на всю ширину и высоту секции how-to: позиционирование блоков

После этого мы размещаем дочерние элементы по моду от центра родительского блока, то есть здесь идет позиционирование элементов относительно секции посредством top, bottom, left, right. how-to: позиционирование блоков

Итог неправильного способа

Минусы этого способа

  • При уменьшении размеров этих блоков при помощи задания font-size у родителя (для этого нужно использовать относительные единицы измерения) how-to: позиционирование блоков эти блоки смещается влево, то есть они не привязаны точно к центральной точке своего родителя.

  • Если придется выровнять родительский блок не по левому краю а по правому, то здесь тоже тупик, не получится нормально без костылей сместить их, так как они привязаны к блоку который имеет размеры 100x100.

2. Правильный способ

Структура у нас остается такая же. Только теперь стили для div.hero_picture будут такими: how-to: позиционирование блоков

Мы распологаем родительский элемент в том месте где он должен быть. А у дочерних элементов стили будут такими: how-to: позиционирование блоков

Здесь мы размещаем их по центру родителя при помощи top: 50% и left: 50% а уже после по моду от центра при помощи margin мы перемещаем их в то место где они должны быть по макету.

Чем хорош этот способ ? Теперь блок div.hero_picture которые вмещает в себя блоки с фотографиями можно перемещать как угодно, достаточно просто изменить позицию и все будет отрабатывать как надо. how-to: позиционирование блоков

Также если вы захотите уменьшить этот блок при помощи font-size (для этого нужно использовать относительные единицы измерения) то он будет уменьшаться так как надо, центральная точка будет неизменна и внутренние элементы не будут смещаться в стороны при уменьшении. how-to: позиционирование блоков

Итог правильного способа