css代码问题

*{
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.5625vw;
	font-family: "Microsoft Yahei";
}
html,
body{
	height:100%;
}

/*music*/
#music{
	position: fixed;
	top:3vh;
	right:4vw;
	width: 15vw;
	z-index:5;
	height:15vw;
	border: 4px solid #ef1639;
	border-radius: 50%;
	background: #fff;
}
#music>img:first-of-type {
	position: absolute;
	top:24%;
	right:2.5%;
	width: 28.421%;
}
#music>img:last-of-type {
	position: absolute;
	top:0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 79%;
}


/*page bg*/
.page{
	height: 100%;
}
.page>.bg{
	height:100%;
	position: absolute;
	width:100%;
	z-index: -1;
}
/*page1*/
#page1>.bg{
	background: url("images/p1_bg.jpg") no-repeat center center;
	background-size: 100%;
}
/*page2*/
#page2>.bg{
	background: url("images/p2_bg.jpg") no-repeat center center;
	background-size: 100%;

}
/*page3*/
#page3>.bg{
	background: url("images/p3_bg.jpg") no-repeat center center;
	background-size: 100%;
}

相同的代码，为什么显示出来，下一张图片会覆盖上一张图片？求解？？？？？？？？？？？？