fixed-top遮挡内容是因为脱离文档流，后续元素顶替原位置；解决方法是在首个内容容器上添加对应高度的padding-top（如pt-5或style="padding-top:72px"）。
fixed-top 为什么一加就遮内容
因为 fixed-top 让 <nav></nav> 脱离文档流，后续元素直接“顶上去”，不预留空间。这不是 bug，是 CSS position: fixed 的必然行为。
必须手动补偿：在 <nav class="fixed-top"></nav> 后的第一个内容容器（比如 <main></main> 或 <div class="container">）上加内边距，例如：
<ul>
<li>
<code>pt-5（对应默认 navbar 高度约 56px）
pt-xxl-4（64px）不够，得用 pt-6 或直接写 style="padding-top: 72px"
padding-top 很危险——手机端折叠菜单后 navbar 高度可能变成 52px，而平板又是 56pxsticky-top 为什么有时完全不生效
sticky-top 不是 fixed-top 的低配替代，它依赖滚动上下文，失效原因非常具体：
- 导航栏的**直接父容器**设置了
overflow: hidden、overflow: auto或overflow: scroll—— sticky 会被截断在这个父容器内，而非视口 - 父容器没有可计算高度（比如
height: auto且无内容撑开），position: sticky就没参考系 - iOS Safari 中常见跳动、下拉菜单点击无反应，90% 是
<meta name="viewport">缺失或外层transform/will-change创建了新层叠上下文
滚动到主导航下方才固定？sticky-top 默认做不到
sticky-top 固定位置始终是“视口顶部”，不是“某个元素下方”。想实现“滚动过主导航后，次级导航才吸顶”，不能只靠 Bootstrap 类。
核心要改的是 CSS top 值，并确保它作用于正确层级：
- 给次级导航加
position: -webkit-sticky; position: sticky; top: 56px;（56px 是主导航默认高度） - 这个
top值必须大于或等于主导航实际渲染高度；如果主导航用了py-3+ 字体缩放，实际可能是 60px，top: 56px就会提前触发 - 次级导航的父容器不能有
overflow限制，也不能是transform: translateZ(0)这类隐式创建新 stacking context 的属性
什么时候该选 fixed-top，什么时候盯住 sticky-top
选 fixed-top 当你明确需要：导航栏从页面加载起就死死钉在视口顶部，不随滚动出现/消失，且能接受手动管理内容偏移。
选 sticky-top 当你需要：导航栏初始在文档流中占位，滚动到临界点才吸顶，离开区域后自动回归文档流——这对 SEO、无障碍、响应式高度变化更友好。
但要注意：sticky-top 在老旧 Android WebView 或部分微信内置浏览器中支持不稳定，上线前必须真机测 overflow 父容器和 viewport 设置。
