直接用position: sticky实现吸顶效果需满足：设top: 0、父容器无overflow: hidden/transform等干扰属性、页面有足够滚动内容；Bootstrap 5的sticky-top类即封装了该逻辑，但需确保兼容性及DOM结构正确。
悬浮导航栏怎么用 position: sticky 实现“吸顶”效果
直接用 position: sticky 是最轻量、兼容性足够（chrome 56+/firefox 59+/safari 15.4+）的方案，比 js 监听滚动更稳定。bootstrap 5 自身不封装 sticky 导航，得手动加 class 和 css。
关键点：父容器不能有 overflow: hidden 或 transform，否则 sticky 失效；目标元素需设 top: 0 才能真正“吸顶”。
- 给导航外层容器加
class="sticky-top"（Bootstrap 5 内置类），它本质就是position: sticky; top: 0; - 若要兼容 Safari 旧版（-webkit-backface-visibility: hidden; 防止 sticky 抖动
- 避免在
<body>直接设overflow-x: hidden，否则 sticky 在 iOS Safari 下完全失效
模糊背景用 backdrop-filter 而不是 filter
filter: blur() 会模糊整个元素及其子节点（包括文字），而 backdrop-filter: blur() 只模糊“背后”的内容，适合导航栏半透效果。但注意：它不支持 IE，且 Safari 需开启硬件加速才能生效。
- 必须配合
background-color使用透明度（如rgba(255,255,255,0.8)），纯transparent会导致模糊无效 - Safari 下若模糊不生效，加
-webkit-backdrop-filter: blur(10px);并确保父容器没设will-change: transform - 移动端性能敏感，
blur(10px)以上可能卡顿，建议控制在6–8px
响应式断点怎么配才不冲突
Bootstrap 的 navbar-expand-* 类控制折叠时机，但和模糊/吸顶共存时容易错乱——比如小屏下 navbar 折叠后，sticky-top 仍生效，导致折叠菜单悬在页面中间。
- 推荐组合：
navbar-expand-lg（≥992px 展开） +sticky-top，并在@media (max-width: 991.98px)中移除sticky-top，改用 JS 控制小屏吸顶逻辑 - 不要对
.navbar-collapse设backdrop-filter，它只该作用于.navbar本体 - 使用
navbar-dark/navbar-light时，模糊后的文字对比度可能不足，需额外调color和text-shadow
为什么 z-index 总是失效
常见现象：模糊导航盖不住轮播图或 banner，其实是 stacking context 断层导致。Bootstrap 的 .carousel 默认 z-index: 2，而 .sticky-top 是 1020，看似够高，但若父容器有 transform 或 opacity < 1，就会创建新 stacking context，把导航压在下面。
- 检查导航父级是否无意中触发了新 stacking context（比如
transform: translateY(0)） - 直接给
.navbar加style="z-index: 1050 !important;"最快验证，但长期应定位并移除干扰属性 - 避免在
<body>上设transform或perspective，这是最隐蔽的 stacking context 源头
模糊 + 吸顶 + 响应式三者叠加后，最容易被忽略的是 stacking context 的隐式创建——它不会报错，只让 z-index 看似失效，查起来得一层层 inspect 元素的 computed z-index 和 transform。
