How would you implement the logic for positioning elements on the page so that it turns out like in the example?

Question

css

Hello, if you look here and start to scale the page with the wheel, you can see that the divs remain in place, and there is no rough shift relative to the SVG layer and the background image remains in place.
I tried to do this on my own (without writing off the code), it turns out not easy. I create a layer with SVG, using a js library, I embed the image in SVG , so that it is centered all the time, place polygons, done. A few styles and the picture becomes quite adaptive. But then a problem arises when I try to make friends between my SVG and HTML elements. If you use the foreignObject tag, then a lot of illness appears in the back seat, plus it is not so cross-browser. I don't see any other way to map divs . Maybe someone will suggest something. Popular articles on Habré are somehow not about that, and on other resources there are too serene examples.

Answer 1

look at the source code of that site and you will understand...