How to make a character correctly?

Question

css

The user on the site collects a character: chooses a hairstyle, T-shirt, pants and shoes - these are 4 sections, respectively, that go under each other. In each section, a picture with a selected item of clothing.

How to lay out the structure correctly so that when the resolution of the browser window changes, the final picture of the character does not break or move out?

Now done like this: parent block with position: relative; clothing elements with position: absolute and the height of each section is calculated in proportion so that the sum is 100% of the parent block. But it seems that this option is unreliable, maybe there are better solutions?

Answer 1

If everything is calculated in relative units, then the layout will not work. However (where would we be without it!) manually check the behavior when changing the screen width and remember: not all browsers behave the same. The main thing is that the clothing elements and the character are in the same block, but you already have that.