Rubber layout of chaotic elements?

Guys, rephrase the question. How to mark up labels in the block in different places on the screen (for infographics) so that when they change the screen remained in one place? in other words, were rubber, like the picture on their background?5ccc8cde8680e441729540.jpeg
March 20th 20 at 11:41
2 answers
March 20th 20 at 11:43
Solution
In General, it is better to do it with SVG.

If you need the CSS here, but read the comments. There are a number of hacks used. Shrink the window width to see that text blocks retain their size and positioning relative to a common parent:
March 20th 20 at 11:45
Take each element, it has top, left, width, height. Make all flat, then take and calculate the value of the percentage relative to the parent container. Once all set, all elements will clearly scale depending on the width of the container, you get a fully rubber block. There will be something to do with fonts, link font size to a unit of vw, it depends on the width of the window, and using @media will limit the amount clearly in px.

How to finish can lean back in the chair and say how cool I am. I, that is me, not you. ))
honestly clearer I did not.. it is possible a simple example? - daphne_Steub commented on March 20th 20 at 11:48
@kariane_Nikolaus, for example, in the layout of your container width of 1000. One of the blocks located at top: 50, left: 123. You need to move left on the interest. Now believe how much percent is 123 of 1000 (123 / (1000 / 100) == 12.3). That's asking left: 12.3%; - Ezra commented on March 20th 20 at 11:51

Find more questions by tags CSSHTML