【CSS】如何将导航栏固定在网页的顶部

最新推荐文章于 2024-04-25 15:04:32 发布

朱砂绛

最新推荐文章于 2024-04-25 15:04:32 发布

阅读量4w

点赞数 24

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42376054/article/details/98987435

版权

前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

问题描述

设置一个当鼠标滑动时，导航栏不移动，但下方的内容可以进行移动

解决方法

首先，上方的导航板块不被移动，可以理解为“它被固定了在此处”。对于固定在于某个位置，我们可以用定位中的固定定位（fixed）来进行设置。
第二步，第一步已经将他固定而不可动，但由于固定定位是脱离标准流的，因此，它所固定的位置会遮住了下方内容的一部分。解决方法：内容部分设置margin-top，具体的值为导航的高度。
第三步，此时内容部分不会被遮住，但导航并非位于网页顶端。解决方法：对导航设置top:0。

框架代码：

 <style type="text/css">
    *{margin: 0;padding: 0;}
     .nav{
        height: 100px;
         width: 100%;
         background: black;
         position: fixed;
         top: 0;
     }
     .content{
         height: 1400px;
         background: orange;
         margin-top: 100px; 
     }
</style>

<body>
    <div class="nav"></div>
    <div class="content">
        hhhhhhhhhhhhhhhhhhhhhhhh 
    </div>
</body>

朱砂绛

关注

24
点赞
踩
89

收藏

觉得还不错? 一键收藏
6
评论
【CSS】如何将导航栏固定在网页的顶部

问题描述设置一个当鼠标滑动时，导航栏不移动，但下方的内容进行移动解决方法首先，上方的导航板块不被移动，可以理解为“它被固定了在此处”。对于固定在于某个位置，我们可以用定位中的固定定位（fixed）来进行设置。第二步，第一步已经将他固定而不可动，但由于固定定位是脱离标准流的，因此，它所固定的位置会遮住了下方内容的一部分。解决方法：内容部分设置margin-top，具体的值为导航的高度。第...
复制链接

扫一扫