移動端position圖片定位問題記錄,以防再犯

剛開始接觸移動端製做，其中遇到的問題：

在一個圖片上定位另外一個圖片，兼容不一樣手機，解決方法是：

如下是我兩個彈層的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;
}