【banner图】部分上层表格被挤到下方
老师，您好。
我编写的代码在前端显示中，【banner图】部分上层表格被挤到下方，如下图所示：
正确显示应该是（如下图）：
问题：
基于下方我写的代码，如何修改才可以将【banner图】部分上层表格显示正确？
感谢，辛苦。
————————
我编写代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-10-作业题</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
/*顶部 开始*/
.header{
width:100%;
position:fixed;
background-color:#07cbc9;
}
.header .logo{
float:left;
}
.header img{
padding-top:9px;
padding-bottom:9px;
padding-left:100px;
position:fixed;}
.header .nav{
float:right;
}
.header .nav ul{
float:right;
list-style-type:none;
padding-right:100px;
/*设置这里是为了导航在header的右侧，而不是被挤下去*/
overflow:hidden;
}
.header .nav ul li{
float:left;
list-style:none;
}
li a {
display:block;
color:white;
text-align:center;
height:71px;
line-height:71px;
text-decoration:none;
font-weight:bold;
padding:0 10px;
}
li a:hover {
background-color:#000;
}
/*顶部 结束*/
/*banner 开始*/
.banner{
width:1700px;
height:800px;
}
.banner img{
width:1700px;
height:800px;
}
.toplayer{
position:fixed;
top:71px;
left:0;
background-color:#000;
width:1700px;
height:800px;
opacity:0.5;
}
.form{
position:relative;
float:left;
z-index:1;
}
/*banner 结束*/
</style>
<body>
<!--顶部 开始-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<div class="nav">
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li><a class="active" href="#about">ABOUT</a></li>
<li><a class="active" href="#gallery">GALLERY</a></li>
<li><a class="active" href="#faculty">FACULTY</a></li>
<li><a class="active" href="#events">EVENTS</a></li>
<li><a class="active" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--顶部 结束-->
<!--banner 开始-->
<div class="banner">
<img src="images/banner3.jpg"/>
<div class="form">
<input type="text" placeholder="Your Name" size="22" />
<input type="text" placeholder="Your Name" size="22" />
<input type="text" placeholder="Your Name" size="22" />
</div>
<div class="toplayer"></div>
</div>
<!--banner 结束-->
</body>
</html>0
收起
正在回答
5回答
同学，你好。
这是因为在banner区域的堆叠顺序大于顶部的堆叠顺序造成的。
建议在顶部区域添加z-index堆叠样式，参考下图：
Amanda_Ding
2019-02-28 11:23:12
@山河远阔ZZ 老师，您好。
已按照您提供的代码进行了修改，但还是前端还是出现了问题。
下方是按照您意见修改的代码：
CSS部分：
*{
margin:0;
padding:0;
}
/*顶部 开始*/
.header{
width:100%;
position:fixed;
background-color:#07cbc9;
top:0; /*顶部设置top：0，让它一直在浏览器的顶部固定。*/
}
.header .logo{
float:left;
}
.header img{
padding-top:9px;
padding-bottom:9px;
padding-left:100px;
position:fixed;}
.header .nav{
float:right;
}
.header .nav ul{
float:right;
list-style-type:none;
padding-right:100px;
/*设置这里是为了导航在header的右侧，而不是被挤下去*/
overflow:hidden;
}
.header .nav ul li{
float:left;
list-style:none;
}
li a {
display:block;
color:white;
text-align:center;
height:71px;
line-height:71px;
text-decoration:none;
font-weight:bold;
padding:0 10px;
}
li a:hover {
background-color:#000;
}
/*顶部 结束*/
/*banner 开始*/
.banner{
width:100%;
height:800px;
margin-top:71px;
/*banner是toplayer遮罩层的父元素，故此处position用relative*/
position:relative;
}
.banner img{
width:1700px;
height:800px;
margin-top:71px;
/*设置相对定位，让里面的子元素根据父元素进行定位*/
position:relative;
}
.toplayer{
/*遮罩层相对于父元素进行定位，所以改成绝对定位*/
position:absolute;
top:0;
left:0;
background-color:#000;
width:100%;
height:800px;
opacity:0.5;
}
.form{
/*float:left;*/
/*表单需要设置绝对定位，才能在banner区域显示，*/
position:absolute;
z-index:1;
top:52%;
left:30%;
}
/*banner 结束*/
</style>HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2-10-作业题</title> <link rel="stylesheet" href="2-10-homework.css"> </head> <body> <!--顶部 开始--> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div> <div class="nav"> <ul> <li><a class="active" href="#home">HOME</a></li> <li><a class="active" href="#about">ABOUT</a></li> <li><a class="active" href="#gallery">GALLERY</a></li> <li><a class="active" href="#faculty">FACULTY</a></li> <li><a class="active" href="#events">EVENTS</a></li> <li><a class="active" href="#contact">CONTACT</a></li> </ul> </div> </div> <!--顶部 结束--> <!--banner 开始--> <div class="banner"> <img src="images/banner3.jpg"/> <div class="form"> <input type="text" placeholder="Your Name" size="22" /> <input type="text" placeholder="Your Name" size="22" /> <input type="text" placeholder="Your Name" size="22" /> </div> <div class="toplayer"></div> </div> <!--banner 结束--> <!--about区 开始--> <!--about区 结束--> <!--gallery区 开始--> <!--gallery区 结束--> <!--页脚区 开始--> <!--页脚区 结束--> </body> </html>
还请您帮我查看一下，具体问题出现在哪里？
感谢，辛苦☕️
山河远阔ZZ
2019-02-28 10:31:18
同学你好，代码中有一下几个问题：
1、因为顶部设置了固定定位，所以导致顶部会遮盖住banner区域的一部分内容，建议顶部设置top：0，让它一致在浏览器的顶部固定。再给banner整体设置margin-top：71px（71是顶部的高度），来把banner所有的内容显示出来，参考下图：
2、表单需要设置绝对定位，才能在banner区域显示，参考下图：
3、banner区域整体要铺满整个浏览器，所以banner设置宽度为100%，遮罩层跟图片也设置为100%，遮罩层相对于父元素进行定位，所以改成绝对定位。
参考下图：
同学可以试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星