固定导航需预留空间防遮挡，推荐body加padding-top；用checkbox+checked实现零JS响应式菜单；合理设置z-index层级；backdrop-filter需避免父容器overflow:hidden；锚点跳转用scroll-margin-top解决遮挡。
导航栏用 position: fixed 就能固定，但必须处理好布局冲突
直接加 position: fixed; top: 0; 很容易导致页面内容被遮挡——因为 fixed 元素脱离文档流，后续内容会“顶上来”。关键不是加定位，而是给 <body> 或主内容区预留出导航栏高度的空间。
- 推荐在
<body>上加padding-top，值等于导航栏高度（比如60px），比用margin-top更稳妥 - 避免对导航容器本身设
height后又用line-height垂直居中——行高会撑开实际高度，和预设 padding 不一致 - 如果导航里有 logo 图片，记得设
vertical-align: middle或用flex对齐，否则容易上下错位
纯 CSS 实现响应式折叠菜单，不用 JS 也能做
用 <input type="checkbox"> 配合 :checked 伪类 + ~ 通用兄弟选择器，就能控制菜单显隐。适合静态页，零 JS 依赖，也方便 SEO。
<nav class="navbar">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-btn">☰</label>
<ul class="menu">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
-
label必须紧邻input，且for属性要匹配input的id - 菜单
<ul>需放在input后面，才能用input:checked ~ .menu选中 - 移动端默认隐藏菜单：
.menu { display: none; }；勾选后显示：input:checked ~ .menu { display: flex; }
z-index 不是越高越好，固定导航的层级要卡在内容之上、弹窗之下
很多静态页把导航 z-index 设成 9999，结果导致模态框、下拉菜单被盖住。合理层级应是：导航 z-index: 100，主内容 z-index: 1，弹窗/下拉菜单 z-index: 1000。
- 只给导航容器设
z-index，别给里面每个<a>单独设 - 若导航用了
backdrop-filter（毛玻璃效果），需确保父容器没设overflow: hidden，否则滤镜失效 - 在 Safari 上测试时注意：
fixed元素在transform父容器内可能失效，避免给<body>加transform
锚点跳转时被固定导航遮挡？用 scroll-margin-top 一行解决
点击 <a href="#section"> 跳转后，目标元素顶部常被固定导航盖住。CSS 提供了原生方案：scroll-margin-top，指定滚动到该元素时，顶部预留多少空间。
立即学习“前端免费学习笔记（深入）”；
h2[id] {
scroll-margin-top: 60px;
}
- 只对带
id的标题生效，h2[id]比h2更精准，避免误设 - 值建议和导航栏高度一致（如
60px），不要用em或rem，防止缩放时偏移 - IE 不支持，但 IE 用户本就不该访问现代静态页；如需兼容，可用 JS 监听
hashchange后手动scrollBy(0, -60)
scroll-margin-top 或 padding-top，用户第一眼就会觉得“这页面做得不细”。 
