我的banner区域的图片和顶部区域不在一个页面，怎么设置banner区？

同学你好！

这里老师对同学的css做了一下修改，由于修改地方较多，老师会在注释中说明为什么那里会进行修改，同学可以参考一下：

*{
    font-family: Microsoft YaHei UI;
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    position:relative;
    background-color:#07cbc9;
    height:60px; 
}
.top .top-image{
    float:left;
    margin-left:50px;
}
.top .auth{
    float:right;
}
.top .auth ul li{
    list-style: none;
    float:left;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
}
.top .auth ul li:hover{
    background-color: black;
}
.top .auth ul li a{
    text-decoration: none;
    color:#ffffff;
}
.banner{
    width:100%;
    height:600px;
   /*  这里不需要居中设置，表单区域是通过绝对定位来实现的居中以及显示在最上层的 */
    /* text-align: center; */
     
}
.banner .banner-image{
    width: 100%;
    height:600px;
   /*  这里推荐使用相对定位*/
   /*  position: absolute; */
   position: relative;
    text-align: center;
 
 
}
.banner .topLayer{
    position:absolute;
    width:100%;
    height:600px;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    /* 遮罩层使用了绝对定位，应该设置top，否则无法和图片重叠 ,top设置为导航栏的高度即可*/
    top:60px;

}

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

*{
	font-family: Microsoft YaHei UI;
	margin:0px;
	padding:0px;
}
.top{
	width:100%;
	position:relative;
	background-color:#07cbc9;
	height:60px; 
}
.top .top-image{
	float:left;
	margin-left:50px;
}
.top .auth{
	float:right;
}
.top .auth ul li{
	list-style: none;
	float:left;
	margin-right: 20px;
	margin-top: 20px;
	text-align: center;
}
.top .auth ul li:hover{
	background-color: black;
}
.top .auth ul li a{
	text-decoration: none;
	color:#ffffff;
}
.banner{
	width:100%;
	height:600px;
	text-align: center;
	
}
.banner .banner-image{
	width: 100%;
	height:600px;
	position: absolute;
	text-align: center;


}
.banner .topLayer{
	position:absolute;
	width:100%;
	height:600px;
	background-color: #000;
	opacity: 0.4;
	z-index: 1;
}