How Can I Place Input Fields Onto Specific Spots On An Image?

I'm looking to figure out a way to bind input fields to an image in specific locations. These locations would be parallels to icons on the image. This would be a way to be a visual guide to users looking to enter the width, height and length of an object. It must also adapt to various screen sizes.

I looked into the html 5 function of an image map. I believe using, "margin-top" and "margin-left".ect in css with classes I could plop items in the right places on my screen, but, the idea would be to place these items in the same area on screens with different widths and heights. This would not be possible with negative margins / padding as it would look strange on screen sizes other than my own.

I know with pixel mapping someone can place a link in a certain area of an image or trigger a script in a certain area of an image. Is it possible to give an input field an id or class and then place that input field onto the image with javascript or something? Maybe like get a copy of the screen dimensions and then transpose it after the fact. Another idea would be to move it there after the dom load with an animation or a transition in css.

Is there some way to use the image map functionality in html5, along with css @media sizes, to do this or is there some other method that would make this a cakewalk?