老师帮忙检查一下!2-3
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: #dcdcdc;
position: fixed;
top: 0;
}
.logo{
padding-top: 8px;
float: left;
}
.logo img{
width: 200px;
height: 85px;
cursor: pointer;
}
.nav{
float: right;
}
.nav ul li{
float: left;
list-style: none;
width: 80px;
line-height: 100px;
cursor: pointer;
}
.banner{
width: 100%;
height: 500px;
padding-top: 100px;
margin-bottom: 1000px;
}
.banner img{
width: 100%;
height: 500px;
}
.banner-mask{
width: 100%;
height: 400px;
background: black;
position: absolute;
top: 100px;
opacity: 0.5;
padding-top: 100px;
z-index: 1;
}
.words{
width: 500px;
height: 200px;
padding-top: 100px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -250px;
text-align: center;
z-index: 3;
}
.words p{
font-size: 38px;
font-weight: bold;
margin-bottom: 20px;
color: white;
}
.words button{
width: 150px;
height: 40px;
background: orange;
border-radius: 5px;
border: none;
color: white;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="header"> <div class="logo"> <img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png" alt="Logo"> </div> <div class="nav"> <ul> <li>前端</li> <li>后端</li> <li>移动端</li> <li>数据库</li> </ul> </div> </div> <div class="main"> <div class="banner"> <img src="http://ww1.sinaimg.cn/large/6b10c3e1gy1fxejf5c06lj22yo1o0b2a.jpg" alt="Banner"> </div> <div class="banner-mask"></div> <div class="words"> <p>我是文字,文字,文字</p> <button>按钮</button> </div> </div> </body> </html>

就是我给遮罩层设置了 半透明 当导航滚动到遮罩层也出现了半透明的情况,但是我发现只要导航条比遮罩层,层级高就不会出现这种情况了!
0
收起
正在回答
1回答
你好同学 ,因为顶部和遮罩都设置了定位 ,脱离文档流 , 而遮罩在顶部上面显示 , 所以需要给顶部设置一个高的层级 ,使其优先显示在上面 , 如下:

另外 ,顶部脱离文档流 ,它下面的盒子main就会移上去 , main部分会被顶部挡住 ,如下:

所以需要给main设置间距 ,值就是顶部高度 ,并设置相对定位 ,是main里面的内容参照它定位,如下:

里面的内容就不需要设置填充了:

遮罩参照main定位 :

文字居中 :

效果如下:

完善一下吧 , 祝学习愉快 ,望采纳 .
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星