AngularJS set element fixed position based on another element

Question

This app takes an image, which is essential a background, or workspace. I need to add input text fields onto this workspace given specific coordinates (top, left, width, height). These coordinates would be relative to the image (top/left = 0/0). How would I position my fields/elements relative to the 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 code above works great for absolute positioning but it is not relative to the image.

Solution

<div style="position:relative">
    <img id="background" ng-src="{{page.backgroundImage}}" class="course-image" />
    <input type="text" ng-repeat="field in page.fields" ng-model="field.value"
           style="position:absolute"
           ng-style="{left:field.left,
                       top:field.top,
                     width:field.width,
                    height:field.height}" />       
</div>

Comments

[gkalpak]

Just a little heads-up: It is better not to include contant values in ngStyle directive (e.g. position: 'absolute'). This causes an extra evaluation per digest loop (and there are several of those going on all the time). Since it will always evaluate to the same value, just hard-code it in the style attribute.

[Thiago C. S Ventura]

Just a point in your answer. The attribute style need to be a common html style like: style="position: absolute"