Vue2+BootstrapVue环境下b-navbar-brand内绝对定位图片显示异常问题

DevOps 小满

2026-10-2

问题说明

开发过程中遇到b-navbar-brand标签内设置了absolute绝对定位的图片显示异常问题。

相关代码

模板代码

<header>
  <b-navbar toggleable="lg" type="dark">
    <b-navbar-brand>
      <img class="logo" src="../assets/FD49.png">
    </b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse is-nav>
      <b-navbar-nav>
        <b-nav-item :to="{name: 'description'}">Description</b-nav-item>
        <b-nav-item :to="{name:'hydrologie'}">Etat des lieux</b-nav-item>
        <b-nav-item :to="{name:'EdL'}">Diag. et Facteurs Limitants</b-nav-item>
        <b-nav-item :to="{name:'EdL'}">Actions préconisés et Gest.Halieutique</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
    <b-nav-text class="ml-auto"><titre></titre></b-nav-text>
  </b-navbar>
</header>

原CSS代码

.logo {
  background-color: beige;
  z-index: 9999;
  height: 8rem;
  padding: 5px; /* firefox 兼容修复 */
  top: 10px; 
  left: 10px;
  width: 8rem;
  position: absolute;
  display: inline-block;
}

原因及修复方案

异常根因：绝对定位元素的位置计算基准是最近的非static定位的祖先元素，b-navbar-brand默认是静态定位，导致logo的定位基准不符合预期，出现错位、溢出等异常。
按以下步骤修改即可修复：

第一步：给b-navbar-brand添加相对定位属性，使其成为logo的定位基准
可先给b-navbar-brand添加自定义类名避免污染全局样式：
```
<b-navbar-brand class="custom-navbar-brand">
  <img class="logo" src="../assets/FD49.png">
</b-navbar-brand>
```
对应添加CSS：
```
.custom-navbar-brand {
  position: relative;
}
```
第二步（可选优化）：如果logo高度超出导航栏默认高度，可给外层b-navbar添加足够的顶部内边距，避免logo和导航栏内其他菜单内容重叠：
```
.navbar {
  padding-top: 2.5rem; /* 可根据logo实际尺寸调整数值 */
}
```