Как сверстать такой блок?

Question

[Elrock]

это 3 разные картинки
давал контейнеру в котором картинки position relative
одну ставил через background-image
остальные две делал через position absoute и давал им индексы но при этом блок куда то улетал за грани экрана

Comments

[approximate solution]

Они как-то в адаптиве должны двигаться? Или зачем такие извращения? Склейте их, и сделайте как одну полноценную картинку.

[Elrock]

approximate solution, ну такое расположение на макете figma, думаю автор подразумевает что должно быть именно так, бвт хочется решить проблему именно через позиционирование

[approximate solution]

Elrock, Думать не надо :) надо спросить, как правило если не подразумевается что 3 части изображения будут друг от друга двигаться в плоскости - нет ничего плохого что бы сделать их единым целым.

Что бы убить всех зайцев - спросите дизайнера как он хочет, и далее - делайте.

[Ankhena]

Elrock, зачем это делать 3мя картинками?
Слейте в одну, тем более, если они все векторные.

Но даже если вам зачем-то хочется, чтобы их было 3 (вдруг, при адаптиве они как-то по-разному себя ведут), но нет анимаций с ними, то сделайте множественный фон, через запятую.

[Elrock]

Ankhena, да спасибо, использую ваш вариант

[Ankhena]

Elrock, очень надеюсь, что тот, который в 1 картинку.

[Elrock]

Ankhena, а почему не через background?

background: 
    url(../Assets/iMac.png) center/cover no-repeat, 
    url(../Assets/dots.png) top left/370px 180px no-repeat, 
    url(../Assets/Vector.jpg) center/contain no-repeat;

[Ankhena]

Elrock, какой смысл ходить на сервер за 3мя картинками и позиционировать их по отдельности, если можно сделать это за 1 ход?
И почему они у вас не векторные?

[Elrock]

Ankhena, переделал на векторные, а под склейкой вы подразумиваете где то в фотошопе склеить 3 изображения?

[Ankhena]

Elrock, у вас же фигма вроде была, прямо из неё и экспортните как одну svg

[Elrock]

Ankhena, я не знал что так можно, спасибо)

Answer 1

[neuroscript]

Почему бы не объединить в одну картинку?
Можно ещё добавить родительскому блоку position: relative
А картинках position: absolute
И играться с z-index: 9999