老师帮忙检查一下!2-3

老师帮忙检查一下!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>

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

就是我给遮罩层设置了 半透明 当导航滚动到遮罩层也出现了半透明的情况,但是我发现只要导航条比遮罩层,层级高就不会出现这种情况了!

正在回答

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

1回答

你好同学 ,因为顶部和遮罩都设置了定位 ,脱离文档流 , 而遮罩在顶部上面显示 , 所以需要给顶部设置一个高的层级 ,使其优先显示在上面 , 如下:

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

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

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

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

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

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

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

遮罩参照main定位 :

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

文字居中 :

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

效果如下:

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

完善一下吧 , 祝学习愉快 ,望采纳 .

  • 王小大 提问者 #1
    好的 谢谢老师指点,已纠正
    2018-11-20 16:24:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师