Как сверстать эту секцию?

Question

[EgorKorol]

Скриншот макета. Картинкой не вставить, т.к. при наведении на текст должны попапчики вылезать. Абсолютом все разваливается.

Comments

[gleendo]

Блок --> в нем абсолютно с позиционированные элементы.

[JackShcherbakov]

iamevg_, Да, плюс то, что я написал.

[EgorKorol]

Попапчики, это да, текст при наведении, это понятно, я не о том. Как именно расположить текст и стрелки на странице? Само собой это кривой дизайн, который сделан не по сетке и вообще без понимания верстки. Меня интересует возможно ли это сверстать без костылей.
Абсолютное позиционирование не подходит, т.к. при малейшем изменении ширины экрана все ломается, а делать breakpoint каждые 100px это не дело.

[JackShcherbakov]

EgorKorol, Позеционирование в процентах вот и все.

[EgorKorol]

Да, я пробовал, все сразу разваливается

[JackShcherbakov]

EgorKorol, Тогда em поставьте, и уменьшайте весь блок, тогда все пропорционально измениться. Плюс у текста и картинок тоже еm

Answer 1

[JackShcherbakov]

1. Что такое попапчики?
2. В html текст, который необходимо показать при наведении оберните в любой строчный тег (типа span) и поставьте следующим по отношению к тому тегу, при наведении на который надо показать текст.
2.1. В css напишите что-то вроде этого (el1 - текст, el2 - то, что вылезает)
Выглядеть будет примерно вот так https://codepen.io/CitizenOne/pen/LOPRKN