Bootstrap 4 navbar overlap не работает

Question

Привет, я triying, чтобы положить mi navbar над изображением в bootstrap 4 ... Я не знаю, почему он не работает. Я уже задал свойства 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> 

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 класс к изображению. Смотрите мой рабочий codepen здесь:

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

Answer 3

Я думаю, что вы хотите сделать что-то вроде этого. взгляните на css. Я добавил дополнительный класс в этот класс класса overimg. Если у вас есть какие-либо вопросы, спросите меня в комментарии. Fiddle

.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; 
 
}

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