顶部菜单优先用 position: sticky；仅当需兼容 IE 或必须绝对钉死时才用 fixed，并手动为 body 添加 padding-top。
顶部菜单栏用 position: sticky 就够了，别一上来就写 fixed——除非你明确要兼容 IE 或必须让它“焊死”在视口顶边。
顶部菜单该用 fixed 还是 sticky？
sticky 是当前最省心的选择：它不脱离文档流、自动占位、滚动到临界点才吸附，且主流浏览器（Chrome 56+、Firefox 59+、Safari 15.4+）都支持。只有两种情况才退回到 fixed：
- 需要支持 IE（它完全不认
sticky） - 菜单必须“绝对钉死”，哪怕页面内容高度不足一屏也要压住下面所有元素
用 fixed 必须手动给 body 加 padding-top，值等于菜单高度（比如 60px），否则正文第一段会被盖住；而 sticky 只要写 top: 0，浏览器自己管占位。
常见错误：.header { position: fixed; top: 0; } 之后没加 body { padding-top: 60px; }，结果左侧菜单或首段文字被截掉顶部。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
菜单项怎么水平排布？flex 是默认答案
别用 inline-block 拼凑，空格和换行会引入不可控间隙，对齐逻辑也绕。直接把 nav 或外层容器设为 display: flex：
- 左右分列用
justify-content: space-between，左边放 logo + 主菜单，右边放用户头像、通知图标 - 垂直居中需要容器有明确高度（比如
height: 60px）或配合align-items: center - 每个菜单项用
a标签，别用div——原生支持键盘Enter/Space触发，无障碍友好 - 避免给
a设display: block后漏掉height或line-height，导致点击热区变小
小屏下怎么收成汉堡菜单？纯 CSS 切换 visibility 最稳
核心不是做动画，而是控制可见性。推荐用隐藏的 input[type="checkbox"] 配合 :checked 伪类，零 JS 依赖：
- 结构上用
input#menu-toggle + label + nav，label模拟按钮，nav包住所有菜单项 - 小屏下
nav设position: absolute; top: 100%; left: 0;，贴在主菜单下方，别用fixed——否则会盖满整个页面 - 过渡只加
max-height和opacity，display不支持transition，写了也无效 - 务必测试 Tab 键焦点顺序：汉堡按钮 → 第一个菜单项 → 下一个可聚焦元素，不能跳空或卡死
错误写法：@media (max-width: 768px) { .nav { display: none; } .nav.active { display: block; } }——这根本不会触发过渡动画。
z-index 和 scroll-margin-top 这两个细节容易被忽略
顶部菜单通常要盖住内容，所以得设 z-index（比如 1000），但要注意别设太高（如 999999），否则可能干扰弹窗、Tooltip 等其他浮层的层级逻辑。
另外，如果页面内用了锚点跳转（比如 #user-settings），滚动后目标元素常被顶部菜单遮住。解决方法不是调 margin-top，而是给目标元素加 scroll-margin-top: 60px（值同菜单高度），浏览器会自动把锚点定位位置往下偏移。
