position: fixed 导航遮挡内容是因为脱离文档流，解决方法是给 body 或主容器设 padding-top；更优方案是用 position: sticky 实现滚动吸附，不遮挡且无需额外留白。
为什么 position: fixed 的导航会遮挡页面内容
直接给导航加 position: fixed; top: 0; 后，它确实不滚动了，但正文内容会从页面顶部开始渲染，被导航盖住——因为 fixed 元素已脱离文档流，不占空间。
- 解决方法不是靠
margin-top“硬推”，而是用padding-top给或主容器留出等高空白 - 导航高度必须可预测：建议用固定值（如
60px）或通过 CSS 自定义属性统一管理，避免用fit-content或未设高的 flex 容器导致计算不准 - 若导航含响应式变化（比如移动端折叠），
padding-top需配合媒体查询同步调整，否则小屏下留白过大或不足
如何让固定导航在滚动后才出现（非始终显示）
纯 CSS 无法监听滚动事件，但可以结合 position: sticky 实现“滚动到临界点才吸附”的效果，比 fixed 更轻量、无需 JS。
-
position: sticky; top: 0;必须作用于**文档流中的元素**，且其父容器不能有overflow: hidden/scroll（否则失效） - 它本质是“相对定位”和“固定定位”的自动切换，不脱离文档流，因此不会遮挡内容，也无需额外
padding - 兼容性足够好：Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+，旧版 Safari 需加
-webkit-sticky - 注意：如果父级设置了
transform、filter或will-change，sticky可能意外失效
移动端适配时 fixed 导航的常见问题
iOS Safari 和部分安卓浏览器对 fixed 元素有特殊行为：键盘弹出、地址栏收起/展开时，可能触发重绘错位或高度计算错误。
- 避免用
vh单位设置导航高度（如height: 10vh），因 iOS 中vh会随地址栏变化而跳变 - 禁用
user-scalable=no（虽然能防缩放，但会让 iOS 键盘弹出时布局错乱更严重） - 若必须用
fixed，建议监听resize事件，在 JS 中动态更新padding-top，但仅限极端场景——多数情况sticky更稳 - 测试真机：模拟器常掩盖滚动粘滞失效问题，务必在 iPhone 实机上验证
sticky行为
当导航需要阴影或层级控制时的 z-index 注意点
fixed 和 sticky 元素默认生成新的层叠上下文，z-index 行为与普通元素不同。
立即学习“前端免费学习笔记（深入）”；
- 不要只写
z-index: 10;，必须显式声明position: relative/fixed/sticky才生效 - 若页面有 modal、tooltip 等浮层，导航的
z-index建议设为100起步，浮层设为1000，避免交叉覆盖 - 多个
fixed元素（如导航 + 返回顶部按钮）按 HTML 顺序层叠，同级z-index值大的在上；但若父容器有transform，子元素的z-index可能被截断 - 阴影推荐用
box-shadow而非伪元素 +z-index模拟，减少层叠干扰
position: sticky 覆盖了绝大多数“固定顶部导航”需求。只有当你需要导航完全脱离视口（比如跨 iframe 或复杂滚动容器内），才值得引入 fixed + JS 补偿逻辑。 
