每次前端布局都要去搜一堆css属性、看一堆解决方案,最后才搞定
这次记录下本次的方案,希望下次可以不用再去查了。。。
需求:一个图片,在相对的位置添加文字,显示在上方
相对位置等都保存在数据库,就过了
整体思路,最外面一个div如下设置
"100%;height:100%;background-image:url(assets/img/cat_dist.png);background-repeat:no-repeat;position:relative;background-size:100% 100%;-moz-background-size:100% 100%;
内部的的文字
<div ng-repeat="x in DeviceList" style="position:absolute;left:{{x.XPosition}};top:{{x.YPosition}}"></div>
主要两点
外部的div
position:relative
内部的div
position:absolute
然后使用 left 和top 属性调整位置