Ребят, помогите, пожалуйста. Вот у меня есть блок с элементами (отмеченные галочкой будут совершать движение с помощью js - совсем небольшое, цикличное, постоянное), другие 2 элемента не будут двигаться. Но как их разумно спозиционировать?? Схема, конечно, приблизительная)
Я попыталась сделать через flex, но код выходит ужасным (если писать через top, left, итд) + ко всему мне нужно это сделать адаптированным под ipad (1024x768), но когда я меняю все размеры - овсе съезжает, соответственно(((
Код прилагаю, но он неправильный - только для примера именно с использованием left и как это все некрасиво выглядит)
Верю, что есть красивое решение этого вопроса - прошу направить меня, спасибо!)
.main {
display: flex;
/* width: 100%; */
position: relative;
}
main > img {
position: absolute
}
.main-image__fourth {
height: 231px;
}
.main-image__first {
width: 125px;
}
.main-image__third {
width: 221px;
}
.main-image__fifth {
width: 257px;
height: 85px;
left: -594px;
top: 503px;
}
.main-image__sixth {
width: 1183px;
height: 239px;
left: -75px;
top: 53px;
}
<div class="main">
<img class="main-image__fourth" src="/src/img/4.png" alt="">
<img class="main-image__first" src="/src/img/1.png" alt="">
<img class="main-image__third" src="/src/img/3.png" alt="">
<img class="main-image__fifth" src="/src/img/5.png" alt="">
<img class="main-image__sixth" src="/src/img/6.png" alt="">
</div>