H5-在图片上定位

首先 弄清楚定位的方法
position:

1.absolute:

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

2.fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

3.relative

生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

4.static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5.inherit

规定应该从父元素继承 position 属性的值。

从上面这些属性可以看出：如果你要做一个类似于“返回顶部”的按钮，那么用fixed没毛病完全OK，但是如果要相对于背景图进行定位，还要对不同屏幕的机型进行适配，这个恐怕fixed就不适用了。

那么问题来了，此题如何破？

师兄雷利的风格不多BB直接上代码

CSS

    .outer{
    position: absolute;/*使用绝对定位 */
    top: 47%;/*距离第一个父元素47%*/
    /*自动居中*/
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

JS

    setTime(){
      let time= setInterval(()=>{
       if(this.setHeight()>0)clearInterval(time);
       },0);//时间可以调节
    }
   setHeight(){
     //console.log("set height");
      var height=document.getElementsByClassName("hongbao_back2")[0].offsetHeight;//获取背景图的高度
      if(height>0)document.body.style.height=height+"px";//将body的高度设置为背景图的高度
      return height;
   }

原理

首先，由于背景图片是自适应的也就是说宽度和高度都有可能变化，不可预测， 所以在css不变的情况下使用fixed肯定是达不到效果的。我们注意到absolute定位是根据第一个父元素定位的，如果没有static定位那肯定就是顶级父元素body了，同时如果图片是全部的背景图，那么也就是图片的宽高也就是body的宽高了。至此我们可以调整思路，将body的高度设置为背景图的高度，这样在absolute定位中就相当于对图片定位了。

其次，由于DOM树的渲染和图片的加载都有延迟，所以我们需要通过setInterval()实现一个监听，一旦我们获取到图片的高度，便更新body的高度，这样我们就实现了相对于背景图定位。