老师怎么遮罩层会移动 如何解决
来源：2-10 作业题
慕勒7338053
2019-07-13 12:12:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-10作业</title>
<style type="text/css">
*{padding:0;
margin:0;
font-family: ' Microsoft YaHei UI'；
}
.tb{
position: fixed;
width: 100%;
height: 80px;
background-color:#07cbc9;
}
.tb .logo{
float: left;
}
.tb .dh{float: right;}
.tb .logo img{
width: 220px;
height:60px;
padding-top:10px;
padding-left:100px;
}
.dh ul li {
float: left;
list-style: none;
padding-top: 30px;
padding-right:30px;
}
a{
text-decoration:none;
font-weight: bold;
color: #ffffff;
font-size: 16px;
}
a:hover{color: red;}
.banner img{
width: 100%;
height: 600px;
}
.banner .zhezao{
position:absolute;
float: right;
top:80px;
left: 0;
background:black;
width: 100%;
height:520px;
z-index:2;
opacity:0.2;
}
.bd{
width: 600px;
height: 350px;
background-color: red;
position: absolute;
top:
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="tb">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="dh">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- banner图 -->
<div class="banner">
<img src="images/banner3.jpg">
<div>
<div class="zhezao"></div>
<div class="bd">
<form class="form">
<input type="text" name="a" placeholder=" you Name" style="width:505px;height: 39px;"><br>
<input type="text" name="b" placeholder=" you Phone" style="width:505px;height: 39px;"><br>
<input type="text" name="c" placeholder=" you Email" style="width:505px;height: 39px;"><br>
<input type="text" name="d" placeholder=" Write Your Comment Here" style="width:505px;height: 115px;">
</form>
</div>
</div>
</div>
<!-- ABOUT区上部分 -->
<!-- ABOUT区中部分 -->
<!-- ABOUT区下部分 -->
<!-- GALLERY区 上部分-->
<!-- GALLERY区 中部分-->
<!-- GALLERY区 下部分-->
<!-- 页脚区 -->
</body>
</html>
1回答
-
同学你好，正常情况下在鼠标滚动时遮罩是会移动的。
同学想表达的是在鼠标滚动时可以在顶部看到吗？
这个是层级的问题，建议：给.tb元素设置层级高于遮罩的层级就可以了。
代码参考：
如果帮助到了你，欢迎采纳~祝学习愉快~
0
相似问题