position: sticky 是当前最稳妥方案；它让导航栏滚动到顶部才粘住且保留在文档流中，避免遮挡、下拉菜单失效和移动端闪动问题，仅需一行样式 .navbar { position: sticky; top: 0; }。
用 position: sticky 是当前最稳妥、最省心的方案；position: fixed 虽然能“始终固定”，但必须手动处理遮挡、下拉菜单失效、移动端闪动三大问题。
为什么 position: sticky 比 position: fixed 更推荐
它让导航栏在滚动到视口顶部时才“粘住”，仍保留在文档流中，后续内容不会上移被盖住；也不需要计算高度补偿、不用改 z-index、下拉菜单默认就能正常展开。
- 只需一行关键样式：
.navbar { position: sticky; top: 0; } - 父容器不能有
overflow: hidden、overflow: auto或任何transform（哪怕值是none） - IE 完全不支持，Chrome/Firefox/Safari（含 iOS Safari 15.4+）均稳定可用
- 如果要加背景或阴影，直接写
background-color和box-shadow即可，无需额外z-index
position: fixed 导致首屏内容被遮住怎么办
因为 fixed 让 <nav> 脱离文档流，后面的内容直接顶到视口顶部——Bootstrap 的 fixed-top 类也一样，它不会自动帮你预留空间。
- 不要给
body加全局padding-top，响应式下 navbar 高度会变（比如折叠后从 72px 缩到 44px） - 在紧接
<nav>后的第一个容器（如<main>或<div class="container">）上加内联样式：style="padding-top: 72px"（数值用getComputedStyle(document.querySelector('.navbar')).height实时查） - 如果用了自定义高度（比如
height: 80px），就别猜pt-5还是pt-6，直接写死更可靠
移动端下拉菜单点不开或被截断
这不是 z-index 不够，而是 fixed 导航栏破坏了 .dropdown-menu 的定位上下文：它默认以 viewport 为参考，但被 fixed 元素盖住了锚点。
立即学习“前端免费学习笔记（深入）”；
- 给
<div class="navbar-collapse">加style="position: relative"，让它成为子菜单的定位根 - 或者禁用 Popper：在
<ul class="dropdown-menu">上加data-bs-popper="none"，再配 CSS：.dropdown-menu { top: 100% !important; position: absolute; } -
z-index必须限定作用域，例如写成.navbar .dropdown-menu { z-index: 1031; }，而不是全局.dropdown-menu
滚动时导航栏抖动或 iOS Safari 错位
这是 WebKit 对 position: fixed 的渲染限制，尤其在快速滚动、软键盘弹出或页面存在 transform 时容易触发。
- 给
<nav>加两个缓解属性：style="backface-visibility: hidden; transform: translateZ(0);" - 检查
<body>或外层 wrapper 是否有transform、perspective、filter（哪怕值是none），它们会创建新层叠上下文，干扰 fixed 定位基准 - 确保
<head>里有标准 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">
真正难的不是写那几行 CSS，而是判断该用 sticky 还是 fixed ——前者适合“滚动到顶部才固定”，后者只在你明确需要“始终压在最上层且不随文档流移动”时才值得投入精力去填坑。
