Css 引导4导航条重叠不工作

嗨，我正在尝试在bootstrap 4中将mi navbar放在图像上…我不知道为什么它不起作用，我已经为这两个元素设置了css属性，但什么都没有发生…下面是我的代码：

<header>
        <nav class="navbar navbar-toggleable-md navbar-light">
              <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
              </button>
              <a class="navbar-brand" href="#">Navbar</a>

              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link disabled" href="#">Disabled</a>
                          </li>
                    </ul>
              </div>
        </nav>

        <img src="http://lorempixel.com/output/nature-q-c-1347-640-8.jpg" class="img-fluid" alt="Responsive image">
  </header>

---

这似乎对我有效，但很难知道这是否对你有效，因为你没有提供适当的背景来回答这个问题。你到底想完成什么

<style>
nav {
  position: absolute;
  background: red;
}

img {
  position: absolute;
}
</style>

<header>
    <img src="http://lorempixel.com/output/nature-q-c-1347-640-8.jpg" class="img-fluid" alt="Responsive image">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

导航{
位置：绝对位置；
背景：红色；
}
img{
位置：绝对位置；
}

以下是您的问题的解决方案。这样，图像将始终位于导航后面，导航（折叠或不折叠）将重叠：

我删除了你的

位置：绝对并将其放在图像上

.background-image {
  position:absolute;
  top: 0;
}  

然后我将
.background image
类添加到图像中。在此处查看我的工作代码笔：

我想你想做这样的东西。看看css，我在Img上的图像类上添加了一个额外的类。如果你有任何问题，请在评论中问我。
.overimg{
位置：绝对位置；
排名：0；
}
navbar先生{
位置：相对；/*默认为其相对位置*/
z指数：1；
不透明度：0.7；/*通过导航栏为可见背景设置此不透明度*/
背景色：#fff；
}









你想用CSS实现什么？删除CSS，它就可以正常工作了。
.background-image {
  position:absolute;
  top: 0;
}