20181016记录一次前端布局

每次前端布局都要去搜一堆css属性、看一堆解决方案，最后才搞定

这次记录下本次的方案，希望下次可以不用再去查了。。。

需求：一个图片，在相对的位置添加文字，显示在上方

 

相对位置等都保存在数据库，就过了

 

整体思路，最外面一个div如下设置

"width: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 属性调整位置