Question

嗨我正在试图将mi navbar放在bootstrap 4中的图像上...我不知道为什么它不起作用我已经为这两个元素设置了css属性但没有任何反应......这是我的代码：< / p>

<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>

CSS

 nav{
    position: absolute !important;
    z-index: 10 ;
    background-color: transparent;
   }

Answer 1

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

<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>

Answer 2

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

我从导航栏中删除了您的position: absolute;，然后将其放在图片上。

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

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

http://codepen.io/egerrard/pen/JEKrNb

Answer 3

我想你想做这样的事情。看看css我已经在该图像类上添加了一个额外的类。如果您有任何疑问，请在评论中提问我。 Fiddle

＆＃13;

.overimg {
  position: absolute;
  top: 0;
}

.navbar {
  position: relative; /*By default its relative*/
  z-index: 1;
  opacity: 0.7;/*Set this opacity for a visiable background through navbar*/
  background-color: #fff;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha256-rr9hHBQ43H7HSOmmNkxzQGazS/Khx+L8ZRHteEY1tQ4=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha256-+kIbbrvS+0dNOjhmQJzmwe/RILR/8lb/+4+PUNVW09k=" crossorigin="anonymous"></script>

<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 overimg" alt="Responsive image" />
</header>

＆＃13;

Bootstrap 4导航栏重叠不起作用

3 个答案: