使用 position: fixed 将导航栏固定在视口顶部，通过 top: 0 使其紧贴浏览器上方；2. 设置 left: 0 和 width: 100% 实现全屏横跨，配合 z-index: 1000 确保层级最高不被遮挡；3. 因脱离文档流可能导致内容被遮盖，需为主要内容添加 margin-top（如60px）预留导航高度；4. 建议优化包括添加 box-shadow 提升视觉层次、使用媒体查询适配不同屏幕、可选 backdrop-filter 实现毛玻璃效果，从而提升用户体验。
要让导航栏在页面滚动时保持固定位置，可以使用CSS中的 position: fixed 属性，并通过 top 控制其垂直位置。这种效果常见于网站顶部的常驻导航，提升用户体验。
使用 position: fixed 固定导航栏
将导航栏设置为固定定位后，它会脱离文档流，始终相对于浏览器窗口显示，即使页面滚动也不会移动。
关键代码：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 1000; /* 确保导航栏在其他内容之上 */
}
说明：
- position: fixed：使元素固定在视口中
- top: 0：让导航栏紧贴浏览器顶部
- left: 0 和 width: 100%：使其横跨整个页面顶部
- z-index：防止被其他内容遮挡
处理页面内容与固定导航的重叠问题
由于 fixed 元素脱离了文档流，页面内容会“上移”，可能被导航栏遮挡。可以通过给主体内容添加上边距来解决。
立即学习“前端免费学习笔记（深入）”；
建议做法：
.main-content {
margin-top: 60px; /* 假设导航栏高度为60px */
}
这样可以确保页面主要内容不会被固定导航遮住，保持可读性。
响应式与样式优化建议
为了让固定导航在不同设备上表现良好，可以考虑以下优化：
- 使用 box-shadow 添加阴影，提升层次感
- 在小屏幕上设置 padding 或调整高度
- 结合媒体查询实现响应式布局
- 必要时使用 backdrop-filter: blur() 实现毛玻璃效果
基本上就这些。fixed 定位配合 top 控制，是实现固定导航最直接有效的方式，不复杂但容易忽略 margin 和 z-index 的细节。
