老师，我想请问一下

老师，我发现原因了，我用qq浏览器打开是这个样子，我用谷歌浏览器打开就和效果图一样了，请问老师这又是为什么呢？两个浏览器效果为什么不一样呢

是不是因为是图片的本身宽度不够宽，然后又设置的宽度是100%，导致头部内容宽度和图片宽度一样，装不下导航的内容所以跑下面去了呢？

老师，我按照你说的方法还是不对，可能是我表达的方式有误，我说的是头部的导航栏内容
变成了这种情况

你好同学 , 因为头部定位脱离文档流 ,所以让banner区域的盒子位置往上移动 , 所以这里并不是下面的about , gallery,events跑到了上面 , 而是banner区域里面的内容跑出了banner区域 ,把下面的盒子盖住了 

所以banner区域应该设置一个上边距 ,让它不被header挡住  ,并设置相对定位 ,让banner里面的内容参照其定位 :

图片的盒子不需要定位 ,去掉

遮罩要设置黑色背景才能实现遮罩的效果

'

表单位置也要调整一下了

祝学习愉快 ,望采纳 .

为什么我写完banner图部分，我写的头部内容里面的导航部分就只有home这一个了，我用检验工具发现about ，gallery，events这些全跑到banner图那里了，然后把banner图部分的html代码注释掉，就能和页面一样正常显示，这是为什么啊

*{margin:0;padding:0;}

body{font-family:"微软雅黑";}

.header{width:100%;height:100px;background:#07cbc9;position:fixed;top:0;z-index:999;

overflow:hidden;zoom:1;}

.header .logo{height:100px;margin-top:26px;margin-left:40px;float:left;}

.header .nav{height:100px;float:right;}

.header .nav ul{overflow:hidden;zoom:1;}

.header .nav ul li{list-style:none;float:left;height:100px;line-height:100px;

padding:0 20px;color:#fff;}

.header .nav li:hover{color:#fff;height:100px;background:black;}

.banner{width:100%;height:500px;}

.banner .banner-1{width:100%;height:500px;position:relative;top:100px;}

.banner .banner-1 img{width:100%;height:500px;}

.banner .banner-2{width:100%;height:500px;position:absolute;top:100px;opacity:0.5;z-index:2;}

.banner .banner-3{width:400px;height:400px;z-index:3;opacity:0.5;

position:absolute;left:50%;margin-left:-200px;top:150px;text-align:center;}

.banner .banner-3 form input{width:400px;height:30px;margin-bottom:20px;}

.banner .banner-3 form{margin-top:47px;}

.banner .banner-3 form textarea{margin-bottom:20px;width:400px;height:80px;}

.header .banner .banner-3 input:hover{border-color:#07cbc9;}