这个顶上被遮住了为什么挪不下来

这个顶上被遮住了为什么挪不下来

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
   
    <script type="text/javascript" src="js\flexible.js">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>Document</title>
</head>
<style type="text/css">
    *{
        box-sizing: border-box;
        margin: 0;
        padding:0;
    }
    .head{
        height: 2.125rem;
        background-color: yellow;
        display: flex;
        position: fixed;
    
    }
    .ig{
        display: flex;
        

    }
    button{
        border-radius:40px;
        height: 1.225rem;
        width: 3rem;
        border:none;

    }
    .btn{
        display: flex;
        
    }
    
    .ig img{
        height: 100%;
        width: 40%;
    }
    .middle{
        padding-top: 2.125rem;
    }
    
    .slider img{
        width: 100%;
    }
    li{
        list-style: none;
    }
    .slider{
        display: flex;
        width: 100%;
        height: 6.25rem;;
    }
    .navg{
        display: flex;
        width: 20%;
        flex-wrap: wrap;
    }
</style>

<body>
    <div class="head">
        <div class="ig">
            <img src="图片\logo.jpg" >
        </div>

        <div class="btn">
            <button>下载APP</button>
        </div>
    </div>  

    <div class="middle">
        <div class="slider">
            <img src="图片\1.jpg">
        </div>
        <div class="nav">
        <ul class="navg">
            <li class="nav1">
                <a href="###">
                    <img src="图片\2.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\3.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\4.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\5.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\6.jpg">
                </a>
            </li>
        </ul>
    </div>
    </div>

    <div class="foot"></div>

    
</body>
</html>


正在回答 回答被采纳积分+1

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

2回答
好帮手慕慕子 2020-08-30 19:09:49

同学你好,老师这边测试同学的代码,没有出现图片被遮住的情况,如下所示:

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

因为头部设置了固定定位,一直在顶部显示,所以页面在滚动过程中,slider图片被遮住,这是正常现象。建议:同学图文结合详细详细描述下,具体是怎么操作的,哪里的图片被覆盖了,便于帮助同学准确的定位与解决问题。

祝学习愉快~

  • 提问者 Ting111 #1
    我加了padding-top后好了谢谢
    2020-08-30 19:13:39
好帮手慕慕子 2020-08-30 17:17:53

同学你好,提供的代码中头部设置了固定定位,默认是一直在顶部显示的,不太清楚同学具体想要实现什么样的功能,建议同学图文结合详细描述一下,便于帮助同学准确高效的定位与解决问题,祝学习愉快~

  • 提问者 Ting111 #1
    图片被遮住了
    2020-08-30 17:29:14
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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