刚开始接触移动端制作，其中遇到的问题：

在一个图片上定位另一个图片，兼容不同手机，解决方法是：

以下是我两个弹层的html代码：

<div class="newUser">
		<div class="lay">
			<!--<img src="../image/award/newUser.png" alt="">-->
			<div class="chai"></div>
			<div class="closePNG">
				<img src="../image/award/closePNG.png" alt="">
			</div>
		</div>
	</div>
	<div class="alreadyOpen">
		<div class="lay">
			<!--<img src="../image/award/redMoney.png" alt="">-->
			<div class="text"><span>50</span><img src="../image/award/yuan.png" alt=""></div>
			<div class="btn">邀请好友一起领取红包</div>
			<div class="closePNG">
				<img src="../image/award/closePNG.png" alt="">
			</div>
		</div>
	</div>

做法是给lay层将大图设置为背景，其大小为图片大小，然后需要定位的图片也设置背景图片相对于lay层定位，其大小为图片的大小：以下是css代码：

.newUser, .alreadyOpen {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .3);
	display: none;
}
.newUser .lay {
	position: relative;
	background: url(../image/award/newUser.png) no-repeat;
	background-size: 100% 100%;
	width: 12.75rem;
	height: 17.45rem;
	top: 50%;
	margin-top: -8.725rem;
	left: 50%;
	margin-left: -6.3725rem;
}
.newUser .lay .chai {
	width: 3.8rem;
	height: 4rem;
	background-image: url(../image/award/chai.png);
	background-size: 3.8rem 4rem;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -2rem;
	bottom: 20%;
}
.newUser .lay .closePNG, .alreadyOpen .lay .closePNG {
	width: 1.45rem;
	height: 1.45rem;
	position: absolute;
	left:50%;
	top: 100%;
	margin-left: -.7rem;
	margin-top: 1.35rem;
}
.alreadyOpen .lay {
	display: none;
	position: relative;
	background: url(../image/award/redMoney.png)no-repeat;
	top: 50%;
	margin-top: -7.125rem;
	left: 50%;
	margin-left: -7.25rem;
	background-size: 100% 100%;
	width: 14.5rem;
	height: 14.15rem;
}
.alreadyOpen .text {
	font-size: 2.3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1rem;
	margin-left: -1.8rem;
	color: #cd992e;
}
.alreadyOpen .text img {
	width: 0.95rem;
	height: 0.95rem;
	display: inline-block;
}
.alreadyOpen .lay .btn {
	position: absolute;
	bottom: 4%;
	left: 50%;
	margin-left: -5.9rem;
	background-image: url("../image/award/inviteBtn.png");
	width: 11.35rem;
	height: 2.45rem;
	background-size: 11.35rem 2.45rem;
	background-repeat: no-repeat;
	line-height: 2.45rem;
	text-align: center;
	color: #eb3b40;
	font-size: 0.8rem;
}