使用 position: fixed 将导航栏固定在顶部，设置 top: 0、left: 0、width: 100% 并通过 z-index: 1000 确保层级最高；2. 为防止内容被遮挡，在主体元素上添加 margin-top，值等于导航栏高度；3. 结合媒体查询实现响应式适配，保证移动端体验。
要让导航栏固定在页面顶部，可以通过 css 的 position: fixed 属性实现。这样无论用户如何滚动页面，导航栏都会保持在屏幕顶端不动。
1. 使用 position: fixed 固定导航栏
给导航栏元素设置 position: fixed，并指定其距离顶部为 0：
- 选择你的导航容器（如 nav 或 .navbar）
- 设置 position: fixed 和 top: 0
- 宽度设为 100% 以横跨整个页面
示例代码：
nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 10px 0; z-index: 1000; /* 确保导航栏在其他内容之上 */ }
2. 避免内容被遮挡
由于 fixed 定位会让导航栏脱离文档流，后面的页面内容会“往上移”，可能被导航栏遮住。可通过添加 margin-top 来解决：
立即学习“前端免费学习笔记（深入）”；
- 在主体内容的最外层容器上增加 margin-top
- 数值应等于导航栏的高度
示例：
main { margin-top: 60px; /* 假设导航栏高度为 60px */ }
3. 提升层级避免被覆盖
使用 z-index 确保导航栏始终显示在最上层：
- 给导航栏设置较高的 z-index 值（如 1000）
- 防止被轮播图、弹窗等元素遮挡
4. 响应式适配建议
在移动端也应保持良好体验：
- 使用媒体查询调整 padding 或字体大小
- 确保 fixed 导航在小屏幕上依然可用
基本上就这些。只要设置好 position、top、width 和 z-index，并处理好内容偏移，就能实现一个稳定可靠的顶部固定导航栏。不复杂但容易忽略 margin 和 z-index 的细节。