Позиционирование изображения и Navbar на вершине eachother

Question

Я работаю над этим навсегда, но не могу найти способ сделать это. Итак, у меня есть столбец начальной загрузки с белой лентой (изображение), и я пытаюсь расположить панель навигации Bootstrap, чтобы лежать поверх этой белой ленты.

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

Прямо сейчас он показывает изображение с помощью навигатора под ним. Я попытался полностью позиционировать их обоих с учетом родительского столбца/строки, но он не работает.

ИДЕАЛ:

То, что я прямо сейчас:

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

Попробуйте сделать это абсолютно в вашем CSS

display: absolute; 

Answer 3

Попробуйте добавить z-index: 2 в стиле CSS для вашего списка/списка Предметы. z-index указывает на укладку элементов. Элементы с более высоким значением располагаются поверх элементов с более низким значением. Каждый элемент имеет значение по умолчанию 1.