將圖像和導航條定位在海誓山盟之上

我一直在研究這個問題，但無法找到解決方法。所以我有一個引導列，有一個白色絲帶（圖像），我試圖將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>

現在它只是顯示下面有Navbar的圖像。我試圖絕對地將它們與父列/行相關聯，但它不起作用。

IDEAL：

我現在所擁有的：

來源

2016-10-02 Ramish Mian

您是否嘗試將img元素放入導航元素中？ –

/* 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; 
}

來源

2016-10-02 16:06:14

通過賦予'div'一個'relative'位置並且它包含元素（'img'和'nav'）和一個'absolute'位置，您可以將兩個元素** relative **定位到它們的父元素，它們是'div'。 'z-index'允許您將元素堆疊在彼此之上。一個號碼較高的號碼堆疊在另一號碼的上面。我使用'right：0px'將元素'0px'的_right edge_放置在遠離'div'的右邊緣的位置，但是您可以使用其他位置屬性'top'，''bottom'和'left'來獲取你想要的樣子。希望這能解決你的問題 –

嘗試使得它在你的CSS絕對

display: absolute;

來源

2016-10-02 15:41:06

嘗試增加z-index: 2爲您的列表/列表中的CSS樣式項目。 z-index指定元素的堆疊。具有較高值的元素位於較低值元素之上。每個元素的默認值爲1.

來源

2016-10-02 16:02:58 Naltroc

將圖像和導航條定位在海誓山盟之上

回答

相關問題