【banner图】部分上层表格被挤到下方

【banner图】部分上层表格被挤到下方

老师，您好。

我编写的代码在前端显示中，【banner图】部分上层表格被挤到下方，如下图所示：


http://img1.sycdn.imooc.com//climg/5c76a1fd0001faf010000499.jpg

正确显示应该是（如下图）：

http://img1.sycdn.imooc.com//climg/5c76a23000018f5f16000574.jpg

问题：

基于下方我写的代码，如何修改才可以将【banner图】部分上层表格显示正确？

感谢，辛苦。

————————

我编写代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>
Amanda_Ding 2019-02-27
源自：项目：网页布局案例   2-10 作业题
0
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

5回答
山河远阔ZZ 回答被采纳获得+3积分 2019-02-28 12:28:57

同学，你好。

这是因为在banner区域的堆叠顺序大于顶部的堆叠顺序造成的。

建议在顶部区域添加z-index堆叠样式，参考下图：

http://img1.sycdn.imooc.com//climg/5c7763860001553d03430188.jpg

1
收起回答
山河远阔ZZ 2019-02-28 12:19:37

同学，你好。

根据你修改后的代码中，图片的宽度也要更改成100%，图片不需要设置margin-top值，参考下图：

http://img1.sycdn.imooc.com//climg/5c77613f000130ba02690177.jpg

这回效果实现就没有问题了哦。

自己试一试~

1
收起回答
  • 提问者 Amanda_Ding #1
    感谢您的回答，已按照您提供的代码进行了修改，但还是前端还是出现了问题。 具体问题：在向下滑动页面时，下方的banner内容把固定在顶端的header内容全部盖住了……TAT 求帮忙详解，感谢。
    2019-02-28 12:25:06
提问者 Amanda_Ding 2019-02-28 11:23:12

@山河远阔ZZ 老师，您好。

已按照您提供的代码进行了修改，但还是前端还是出现了问题。

下方是按照您意见修改的代码：

CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
        *{
            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部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>


还请您帮我查看一下，具体问题出现在哪里？

感谢，辛苦☕️

0
收起回答
山河远阔ZZ 2019-02-28 10:31:18

同学你好，代码中有一下几个问题：

1、因为顶部设置了固定定位，所以导致顶部会遮盖住banner区域的一部分内容，建议顶部设置top：0，让它一致在浏览器的顶部固定。再给banner整体设置margin-top：71px（71是顶部的高度），来把banner所有的内容显示出来，参考下图：

http://img1.sycdn.imooc.com//climg/5c7747210001a50c05120164.jpg

http://img1.sycdn.imooc.com//climg/5c77472a0001324704260156.jpg

2、表单需要设置绝对定位，才能在banner区域显示，参考下图：

http://img1.sycdn.imooc.com//climg/5c7747860001513803590175.jpg

3、banner区域整体要铺满整个浏览器，所以banner设置宽度为100%，遮罩层跟图片也设置为100%，遮罩层相对于父元素进行定位，所以改成绝对定位。

参考下图：

http://img1.sycdn.imooc.com//climg/5c7747d60001a15103760160.jpg

http://img1.sycdn.imooc.com//climg/5c7747dd00018b6d02430107.jpg

http://img1.sycdn.imooc.com//climg/5c7747e80001a95103430217.jpg

同学可以试一试哦，如果帮助到了你，欢迎采纳。

祝学习愉快！

1
收起回答
  • 提问者 Amanda_Ding #1
    感谢您的回复，已按照您提供的代码进行了修改优化。但前端还是出现了问题， 具体请看上方回复内容。
    2019-02-28 11:18:50
慕仔2567563 2019-02-27 23:02:41

朋友，首先你的结构就已经有点问题了，还有一个按照作业要求是把css分离出来，而不是跟html文件写在一起，建议你多看几遍 2-3 主体上面的图片 这一节

0
收起回答
  • 提问者 Amanda_Ding #1
    感谢您的建议，但是我还是觉得把css、html部分都贴出来，方便老师查阅。
    2019-02-27 23:11:49
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么显示有问题 挤在一起了 但是ctrl 到80%就正常 是不是分辨率的问题啊
0 0 5
移动图层的时候，明明点的是慕课网，但是动的却是下面的部分，怎么办呀？
0 0 4
大作业中做到这里，banner部分图片不显示
55 0 5
老师我不理解为什么会出现图片和遮罩层未对齐的情况,img离顶部本该就是48px啊。
0 0 3
为什么我的表单定位了还是会把图片挤掉
0 0 8

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码