如何将我的导航栏放在我的背景上

Question

我正在尝试将导航栏放在网站的背景封面上。我已经尝试过使用相对位置和绝对位置，但它不起作用。导航栏出现在背景图片下方，而不是在其上。我也看过它是否不透明但那不是问题

这是带有背景图像和导航栏的代码。

<div style="background: url(https://i.postimg.cc/ZnHTP71s/aircraft-airplane-boat-1575833.jpg)" class="page-holder bg-cover"></div>
  <div class="navbar">
    <a class="navbar-brand" href="#">
      <img src="{% static 'IMG/logo-png.png' %}" alt="Logo" width="80" height="55"></a>
      <a class="brand-schrift">DivusX</a>
    <span class="navbar-text">
         <a href="{% url 'home:index' %}" class="nav-element">Home</a>
         <a href="" class="nav-element">FAQ</a>
         <a href="" class="nav-element">Contact</a>
  
    </span>
  </div>

CSS：

  .page-holder {
    min-height: 80vh;
    position: relative;
    
  }
  
  .bg-cover {
    background-size: cover !important;
    position: relative;
  }

.navbar{
    background-color: transparent;
    position: fixed;
}

.navbar-text{
    position: relative;
    right: 7%;
    font-size: 20px;

}
.nav-element{
    text-decoration: none;
    color: black;
    margin: 10px;

}

.navbar-brand{
    position: relative;
    left: 2%;
    color: black;
}

.brand-schrift{
    position: relative;
    font-size: 25px;
    right: 38%;
    color: black;
    text-decoration: none;
    font-weight: bold;

}

感谢您的帮助！

Answer 1

请参考bootstrap documentation