Bootstrap 4 chevauchement de la barre de navigation ne fonctionne pas

Question

Salut je tente de mettre mi navbar sur une image dans bootstrap 4 ... Je ne sais pas pourquoi cela ne fonctionne pas J'ai déjà mis les propriétés css aux deux éléments, mais rien ne se passe ... voici mon code:

<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

cela semble fonctionner pour moi, mais il est un peu difficile de savoir si cela fonctionnera pour vous parce que vous n'avez pas fourni le contexte approprié pour répondre la question. Qu'essayez-vous exactement d'accomplir?

<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

Voici une solution à votre problème. De cette façon l'image sera toujours derrière le nav et le nav (effondré ou pas) se chevauchera:

J'ai enlevé votre position: absolute; de la navigation et l'ai mis sur l'image à la place. Puis j'ai ajouté cette classe .background-image à l'image. Voir mon travail codepen ici:

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

Answer 3

Je pense que vous voulez faire quelque chose comme ça. jetez un oeil sur css J'ai ajouté une classe supplémentaire sur cette classe d'image overimg. Si vous avez des questions, demandez-moi un commentaire. 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>