お互いの上に画像とナビゲーションバーを配置

Question

私はこれを永遠に取り組んできましたが、それを行う方法を見つけることができません。 ホワイトリボン（イメージ）を持つブートストラップ列があり、このホワイトリボンの上にブートストラップナビゲーションバーを配置しようとしています。

  <div class="row"> 
       <div class="col-lg-offset-4"> 
        <img src="./Images/WhiteRibbon.png" id="WhiteRibbonImg"> 



        <nav class="navbar"> 
         <ul class="nav navbar-nav"> 


          <li class="dropdown" class="col-lg-2 col-md-2"> 

           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Item</a> 

           <ul class="dropdown-menu"> 
            <li><a href="#">Suspendisse tincidunt</a></li> 
            <li><a href="#">Suspendisse tincidunt</a></li> 
            <li><a href="#">Suspendisse tincidunt</a></li> 
           </ul> 
          </li> 
         </ul> 
        </nav> 
       </div> 
      </div> 

今のところ、Navbarを下に置いた画像が表示されます。私は親カラム/行への相対的な位置付けの両方を絶対的に配置しようとしましたが、機能しません。

IDEAL：

私が今持っているもの：

Answer 1

/* Position the containing element */ 
div.col-lg-offset-4 { //Create a class & don't use bootstraps class name 
    position: relative; 
} 

img { 
    position: absolute; 
    z-index: 1; 
    right: 0; 
} 

nav { 
    position: absolute; 
    z-index: 2; 
    right: 0; 
} 

Answer 2

が

display: absolute; 

Answer 3

あなたのCSSでそれは絶対あなたのリスト/リストについては、CSSスタイルにz-index: 2を追加してみてくださいを作ってみましょうアイテム。 z-indexは、要素の積み重ねを指定します。より高い値を持つ要素は、より低い値の要素の上にあります。すべての要素のデフォルト値は1です。