Пользователь на сайте собирает персонажа: выбирает прическу, футболку, штаны и обувь - это соответственно 4 секции, которые идут друг под другом. В каждой секции картинка с выбранным элементом одежды
Как правильно сверстать структуру, чтобы при изменении разрешения окна браузера итоговая картинка персонажа не ломалась и не съезжала?
Сейчас сделано так: родительский блок с position: relative; элементы одежды с position: absolute и height каждой секции высчитан по пропорции, чтоб в сумме было 100% от родительского блока. Но кажется что такой вариант ненадежный, может есть решения получше?
Если все высчитано в относительных единицах, то верстка не поедет. Однако (куда ж без него!) проверьте вручную поведение при изменении ширины экрана и помните: не все браузеры ведут себя одинаково. Главное, чтобы элементы одежды и персонаж находились в одном блоке, но у вас это уже есть.
