AngularJS基于另一个元素上设置元素的固定位置 [英] AngularJS set element fixed position based on another element

问题描述

此应用程序需要的图像，这是必不可少的背景下，或工作区。我需要添加输入文本字段到这个工作区给出具体坐标（顶部，左，宽，高）。这些坐标是相对于图像（顶部/左= 0/0）。我将如何定位相对于图像我字段/元素？

 ＆LT; IMG ID =背景NG-SRC ={{page.backgroundImage}}/＆GT;
        ＆LT;输入类型=文本NG重复=字段page.fieldsNG模型=field.value
               NG-风格={位置：绝对，
                              左：field.left，
                               顶部：field.top，
                             宽度：field.width，
                            高度：field.height}/＆GT;
 

上面的code的伟大工程的绝对定位，但它相对于图像是没有的。

解决方案

 ＆LT; D​​IV的风格=的位置是：相对＆GT;
    ＆LT; IMG ID =背景NG-SRC ={{page.backgroundImage}}级=当然，像/＆GT;
    ＆LT;输入类型=文本NG重复=字段page.fieldsNG模型=field.value
           风格=的位置是：绝对
           NG-风格={左：field.left，
                       顶部：field.top，
                     宽度：field.width，
                    高度：field.height}/＆GT;
＆LT; / DIV＆GT;
 

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.

解决方案

<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>

这篇关于AngularJS基于另一个元素上设置元素的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！