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 屬性調整位置