ブートストラップ4 navbarは動作しません

Question

私はブートストラップ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> 

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

私はあなたがこのようなものを作りたいと思います。私はその画像クラスのオーバーイグに余分なクラスを追加しました。コメントがあれば質問してください。 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>