导航栏置顶或者固定顶部显示代码
要实现CSS导航栏置顶显示，主要依赖position: fixed或position: sticky两种定位方式，具体实现方法如下：
一、固定定位（FixedPositioning）
核心代码
通过position:fixed将导航栏固定在视口顶部，并设置top:0和width:100%确保全屏覆盖：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
z-index: 999; /* 确保层级高于其他元素 */
}
内容遮挡处理
若导航栏下方内容被遮挡，需为内容区域添加与导航栏高度匹配的margin-top：
.content {
margin-top: 50px; /* 与导航栏高度一致 */
}
二、粘性定位（StickyPositioning）
核心代码
使用position:sticky实现滚动到特定位置时置顶（适合部分场景的动态固定）：
.navbar {
position: sticky;
top: 0;
background: #cce7cc;
z-index: 999;
}
兼容性处理
部分浏览器需添加前缀：
.navbar{
position:-webkit-sticky;
position:sticky;
}
三、注意事项
层级控制
通过z-index确保导航栏不被其他元素覆盖，推荐值≥99947。
移动端适配
移动端需通过@media调整导航栏高度和布局，避免内容溢出2。
兼容性
position:sticky在低版本浏览器（如IE）不兼容，可结合JS监听滚动事件实现类似效果