使用position: fixed可让导航栏随页面滚动始终固定在顶部，通过top: 0、left: 0和width: 100%使其横跨屏幕，z-index确保层级优先，需用padding-top或margin-top避免内容被遮挡，结合box-shadow和响应式设计优化显示效果。
要让导航栏在页面滚动时始终保持在屏幕的某个位置（比如顶部），可以通过 CSS 的 position: fixed 属性来实现。这种方法简单高效，适用于大多数网页布局。
使用 position: fixed 固定导航栏
将导航栏元素的 CSS position 属性设置为 fixed，并指定其相对于浏览器窗口的位置。
例如，让导航栏始终固定在页面顶部：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 1000; /* 确保导航栏在其他内容之上 */
}
关键点说明：
立即学习“前端免费学习笔记（深入）”；
- top: 0 让导航栏紧贴浏览器窗口顶部
- left: 0 和 width: 100% 使其横跨整个屏幕宽度
- z-index: 1000 防止被其他内容遮挡
处理页面内容与固定导航栏的重叠问题
由于 fixed 元素脱离文档流，页面内容会“上移”，可能被导航栏遮挡。可通过以下方式留出空间：
body {
padding-top: 60px; /* 假设导航栏高度为60px */
}
或者给主内容区域添加 margin：
.main-content {
margin-top: 60px;
}
响应式与样式优化建议
为了让固定导航栏在不同设备上表现良好，可以加入响应式设计：
- 使用 box-sizing: border-box 避免宽度计算问题
- 在小屏幕上考虑使用汉堡菜单
- 添加阴影提升视觉层次：box-shadow: 0 2px 5px rgba(0,0,0,0.1)
基本上就这些。用 position: fixed 实现固定导航栏简单直接，关键是处理好布局重叠和响应式适配。
