How to keep the position of the text in the picture when the resolution is reduced?

Question

css

Friends in general. The bottom line is that there is a picture inserted with a tag, you need to overlay text on top of it in a certain place.

screen

At the same time, it is necessary to maintain adaptability, i.e. so that when the screen size is reduced, the text does not move. That is, therefore, it is possible to set the text location through css by setting certain parameters. But at the same time writing a billion media queries. Is there another solution?
Now the text is not positioned in any way, it just has position:absolute; here, it should be between two rectangles)

Answer 1

change units from px to em/rem