如何修复Bootstrap 5导航栏始终处于sticky粘性定位状态的问题

解决方案 #

• 优先排查CSS优先级问题：直接给<nav>标签的行内样式添加position: fixed !important;，行内样式加!important优先级最高，可覆盖所有外部CSS的定位规则，修改后的标签如下：

<nav class="navbar fixed-top navbar-light navbar-expand-md navigation-clean-button" style="width: 100%;position: fixed !important;">

• 检查导航栏所有父元素的CSS属性：如果父元素存在transform、perspective、filter属性且值不为none，会导致fixed定位失效，元素表现为类似sticky的相对滚动效果，删除对应父元素的这些属性即可恢复正常fixed定位。
• 用浏览器开发者工具定位生效规则：按F12打开控制台，选中导航栏元素，在「计算样式」面板找到position属性，点击属性旁的来源跳转链接，可直接定位到是哪条CSS规则设置了sticky定位，无需手动翻找项目代码。
• 升级Bootstrap版本：你当前使用的5.0.0-beta2是早期测试版本，存在大量未修复的样式bug，升级到Bootstrap5正式版即可解决版本自带的导航栏定位异常问题。

内容的提问来源于stack exchange，提问作者HamsterRecords