¿Cómo puedo colocar campos de entrada en puntos específicos de una imagen?

Estoy buscando una forma de vincular los campos de entrada a una imagen en ubicaciones específicas. Estas ubicaciones serían paralelas a los iconos de la imagen. Esta sería una forma de ser una guía visual para los usuarios que buscan ingresar el ancho, alto y largo de un objeto. También debe adaptarse a varios tamaños de pantalla.

Investigué la función html 5 de un mapa de imagen. Creo que al usar "margin-top" y "margin-left".ect en css con clases, podría colocar elementos en los lugares correctos de mi pantalla, pero la idea sería colocar estos elementos en la misma área en pantallas con diferentes anchos y alturas. Esto no sería posible con márgenes/relleno negativos, ya que se vería extraño en tamaños de pantalla que no sean los míos.

Sé que con el mapeo de píxeles alguien puede colocar un enlace en un área determinada de una imagen o activar un script en un área determinada de una imagen. ¿Es posible darle a un campo de entrada una identificación o clase y luego colocar ese campo de entrada en la imagen con javascript o algo así? Tal vez como obtener una copia de las dimensiones de la pantalla y luego transponerla después del hecho. Otra idea sería moverlo allí después de que dom cargue con una animación o una transición en css.

¿Hay alguna forma de usar la función de mapa de imágenes en html5, junto con css @tamaños de medios, para hacer esto o hay algún otro método que haría que esto fuera pan comido?