position: fixed 是固定导航栏的首选，因其使元素脱离文档流、相对于视口定位且滚动不变；需设 top: 0、left: 0/right: 0、width: 100%、z-index 及 body padding-top 避免遮挡。
为什么 position: fixed 是固定导航栏的首选
因为只有 position: fixed 能让元素完全脱离文档流、相对于视口定位，滚动时保持位置不变。用 position: absolute 或 sticky 都达不到真正“固定”的效果——前者依赖父容器定位上下文，后者受滚动容器限制且兼容性略差（IE 不支持）。
关键点：fixed 元素的坐标系是整个浏览器窗口，不是某个父级，所以必须手动设置 top、left 等值来锚定位置。
top: 0 和 width: 100% 必须同时写
只设 position: fixed 不会自动铺满顶部；默认宽度是内容宽度，高度是内容高度，容易出现错位或遮挡。
-
top: 0把导航栏钉在视口最上方 -
left: 0和right: 0一起用比只写width: 100%更可靠（避免因 box-sizing 或边框导致溢出） - 务必加
z-index: 1000（或足够大的值），否则可能被后续内容盖住
body 内容要留出导航栏高度，否则会被遮挡
这是最常踩的坑：导航栏 fixed 后脱离文档流，body 第一个子元素会直接顶到页面顶部，被导航栏盖住。
立即学习“前端免费学习笔记（深入）”；
- 给
body或主容器加padding-top，值等于导航栏高度（如padding-top: 60px） - 或者用
margin-top，但注意 margin 可能塌陷，padding 更稳妥 - 如果导航栏高度不固定（比如响应式下变化），用 CSS 自定义属性 + JS 动态更新
padding-top，但多数项目直接写死更简单
移动端适配要注意 viewport 和缩放行为
iOS Safari 在地址栏收起/展开时会触发视口高度变化，fixed 元素有时会短暂错位；Android Chrome 也有类似问题。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且正确 - 避免在
fixed导航栏里放input或需要软键盘的交互——iOS 下键盘弹出会把 fixed 元素顶上去，且不恢复 - 如果必须支持输入，考虑降级为
position: sticky（仅在支持的环境），或监听resize事件重置top
固定导航栏看着简单，但滚动锚点、焦点管理、键盘兼容、无障碍 focus-outline 偏移这些细节，才是真正卡住上线的地方。
