加 fixed-top 后遮挡首屏是正常现象，需通过首个内容容器加 padding-top、navbar-collapse 设 position: relative、html 设置 scroll-padding-top 及优化 iOS 渲染四步解决。
加了 fixed-top 就盖住首屏内容？这不是 Bug，是 position: fixed 的必然行为——导航栏脱离文档流，后面的内容直接顶到视口顶部。关键不是“去掉 fixed”，而是补空间、修定位、调锚点。
首个内容容器必须加 padding-top，别动 body
Bootstrap 不会自动给 body 或后续容器留空，硬写 body { padding-top: 56px } 在响应式下大概率出错：小屏折叠后 navbar 高度常缩到 44–48px，全局固定值会导致多留白；大屏若加了 logo 或放大字体，又会遮住。
- 在
<nav class="navbar fixed-top">后面**第一个块级容器**（如<header>、<main>、<div class="container">）上加pt-6（Bootstrap 5.3+ 中为 4rem ≈ 64px），比默认pt-5更稳妥 - 若你改过
font-size、py-*或加了自定义高度，打开 DevTools 运行：getComputedStyle(document.querySelector('.navbar')).height，查真实像素值，然后用内联样式：style="padding-top: 72px" - 避免同时用
mt-*和pt-*，外边距可能合并或叠加错乱；也别对这个容器设transform或margin-top: -xx，会破坏层叠上下文
移动端下拉菜单被裁切，关键是定位上下文
点开 navbar-toggler，.dropdown-menu 只显示半截甚至消失——问题不在 z-index，而在它找不到父级定位锚点。默认情况下，position: absolute 的下拉菜单以 viewport 为参考，而 fixed-top 导航栏正压在上面。
- 给
<div class="navbar-collapse">显式加style="position: relative"，让内部下拉菜单有明确的定位上下文 - 或禁用 Popper 动态定位：在
<ul class="dropdown-menu">上加data-bs-popper="static"，再配 CSS：.dropdown-menu { top: 100% !important; } - 确认
z-index层级：navbar 默认是1030，下拉菜单至少设z-index: 1031，且规则要带.navbar前缀限定作用域，避免全局污染
锚点跳转后标题被盖住，scroll-padding-top 必须写在 html 上
点击 #about，<h2 id="about"> 顶部卡在 navbar 底部下面——这是浏览器原生滚动行为没考虑 fixed 元素。JS 补偏移容易漏事件，CSS 方案更干净可靠，但写错位置就完全失效。
-
scroll-padding-top必须写在<html>元素上，因为锚点滚动的容器是html，不是body或main；写在body上在 Safari 15.3 及更早版本中静默无效 - 推荐用 CSS 自定义属性适配响应式：
:root { --nav-height: 56px; }，再配合媒体查询：@media (max-width: 767px) { :root { --nav-height: 48px; } }，最后写html { scroll-padding-top: var(--nav-height); } - 如果用了 Vue Router / React Router 等 SPA 路由器，它可能劫持了原生滚动，此时
scroll-padding-top会静默失效，需检查路由配置是否启用了scrollBehavior或手动调用scrollIntoView
iOS 滚动抖动或闪退，硬件加速和层叠上下文是关键
快速滚动时导航栏跳动、软键盘弹出后错位、Safari 闪退——根源是 WebKit 对 position: fixed 的渲染限制，尤其当页面存在 transform、perspective 或 filter 时。
- 给
<nav class="navbar">加两个缓解属性：style="backface-visibility: hidden; transform: translateZ(0)" - 检查
<body>或外层 wrapper 是否误加了transform、perspective、overflow: hidden—— 这些会创建新层叠上下文，让fixed定位基准变成该容器而非视口 - 确保
<head>中有标准 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">，缺失会导致 iOS 固定定位错位或闪动
真正难的从来不是加那个类，而是意识到 fixed-top 只解决“定位”，不解决“空间补偿”“定位上下文”和“锚点滚动行为”——三者缺一不可，且每个环节的错误都可能静默失效，得逐项验证真实渲染高度和 DOM 结构。
