高度100%情况下，Css定位问题

情况：做一个单页面，除了背景之外，有3个div块，需要定位到背景的特定未知上。用top定位，出现了不同屏幕，定位偏差的问题。

解决：

<div class="bg">
  <img src="背景图片" width="100%">
  <img class="ticket" src="图片1">
  <img class="hand" src="图片2">
  <img class="banner1" src="图片3">
  <img class="banner2" src="图片4">
</div>

Css代码：

.bg{
    width: 100%;
    position: relative;
  }
  .ticket{
    position: absolute;
    top: 14%;
    left: 50%;						//居中操作
    width: 500pt;				// 居中操作
    margin-left: -250pt;		//居中操作
  }
  .banner1{
    position: absolute;
    bottom: 20%;
    width: 750pt;
    left: 50%;
    margin-left: -375pt;
  }
  .banner2{
    position: absolute;
    bottom: 6%;
    width: 750pt;
    left: 50%;
    margin-left: -375pt;
  }

原理：

用背景图把界面撑开，背景父级元素相对定位，内容元素绝对定位
内容元素根据背景元素的高度去定位