导航栏固定在网页顶部 -【CSS -Position:fixed 应用】

最新推荐文章于 2024-07-23 21:45:47 发布

原创最新推荐文章于 2024-07-23 21:45:47 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用CSS的Position:fixed属性将导航栏固定在网页顶部，即使在页面滚动时导航栏始终保持在屏幕顶部。通过设置适当的属性值，避免遮挡内容并确保导航栏在页面顶端正确显示。

这里写自定义目录标题

CSS position 属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

属性值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值

Position:fixed; 应用

[ 问题 ] 如何将导航栏固定在网页的顶部？

鼠标向下滚动时，导航栏不动，仅内容向下滚动

[ 解决方法 ] 使用CSS Position:fixed; 属性

首先，导航板块不被移动，可以理解为“它被固定了在此处”。对于固定在于某个位置，我们可以用定位中的Position属性（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">
        网页内容部分
    </div>
</body>