css导航栏一直在上面 |flex 引用css

/* CSS代码 */
/* 首先大家来定义导航栏的外观和位置 */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #F5F5F5;
padding: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
/* 接下来定义导航栏中的每一个链接的外观 */
nav a {
color: #333;
text-decoration: none;
margin-right: 10px;
font-weight: bold;
font-size: 16px;
}
/* 鼠标移到链接上时的效果 */
nav a:hover {
color: #E84C3D;
}
/* 最后，大家来为导航栏中的当前页添加样式 */
nav .current {
color: #E84C3D;
border-bottom: 2px solid #E84C3D;
}

以上代码的实现方法比较简单。首先使用CSS的position属性将导航栏的定位方式设置为fixed，这样导航栏就可以一直固定在页面顶部。然后大家给导航栏设置背景颜色和padding，以及一些阴影和z-index等属性来让它看起来更美观。接下来再用a标签来定义导航栏中的每一个链接的外观，以及当鼠标移到链接上时的效果。最后，大家使用.current类来为导航栏中的当前链接添加样式。

当页面比较高时，导航栏依然会停留在页面顶部，如果用户需要访问导航栏中的链接，只需向下滚动即可。相信通过这样的方式，一直在页面顶部的导航栏将会大大提高用户的浏览体验。