fixed定位是实现导航栏固定在视口的标准做法，需设置top/left、width和z-index，并为后续内容预留空间，同时注意避免父级transform影响及移动端兼容性问题。
fixed 定位能让导航栏真正“固定”在视口上
可行，而且是标准做法。position: fixed 的核心特性就是脱离文档流、相对于视口（viewport）定位，滚动时位置不变。只要不被父元素的 transform、perspective 或 filter 等属性意外创建新的 containing block，它就会稳稳钉在屏幕指定位置。
必须显式设置 top / left 才会生效
只写 position: fixed 不会自动让导航栏“贴顶”，它默认仍按原文档位置渲染（即 top/left 为 auto），视觉上可能消失或错位。必须手动指定坐标：
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
-
top: 0是最常用起点，但也可设top: 20px实现悬浮效果 - 务必加
width: 100%，否则宽度默认收缩为内容宽 -
z-index要足够高，避免被后续内容遮盖
页面主体内容会被导航栏遮挡，需主动留空
fixed 元素不占文档流空间，后面的内容会从顶部开始渲染，直接“钻进”导航栏底下。常见补救方式：
移动端要注意 viewport 设置和交互兼容性
在 iOS Safari 和部分安卓浏览器中，fixed 在缩放、地址栏收起/展开时可能抖动或失效：
立即学习“前端免费学习笔记（深入）”；
- 确保
包含width=device-width, initial-scale=1 - 避免对
fixed元素父级使用transform（哪怕只是translateZ(0)），否则会触发新 containing block，导致“固定”失效 - 若需支持老版 Android（≤4.4），考虑降级用
position: sticky+ JavaScript 模拟（但sticky本身不完全等价）
transform 的隐式影响和主体内容的留白处理——这两处出问题，导航栏要么“掉下来”，要么把页面首屏内容盖住，调试时容易绕弯。 
