Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one accurately position these elements in relation to the underlying image?
<img id="background" ng-src="{{page.backgroundImage}}" />
<input type="text" ng-repeat="field in page.fields" ng-model="field.value"
ng-style="{position:'absolute',
left:field.left,
top:field.top,
width:field.width,
height:field.height}"/>
The current code successfully achieves absolute positioning, but lacks the ability to be truly relative to the background image.