将图像和导航条定位在海誓山盟之上

问题描述：

我一直在研究这个问题，但无法找到解决方法。所以我有一个引导列，有一个白色丝带（图像），我试图将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：

我现在所拥有的：

您是否尝试将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; 
}

通过赋予'div'一个'relative'位置并且它包含元素（'img'和'nav'）和一个'absolute'位置，您可以将两个元素** relative **定位到它们的父元素，它们是'div'。 'z-index'允许您将元素堆叠在彼此之上。一个号码较高的号码堆叠在另一号码的上面。我使用'right：0px'将元素'0px'的_right edge_放置在远离'div'的右边缘的位置，但是您可以使用其他位置属性'top'，''bottom'和'left'来获取你想要的样子。希望这能解决你的问题 –

答

尝试使得它在你的CSS绝对

display: absolute;

答

尝试增加z-index: 2为您的列表/列表中的CSS样式项目。 z-index指定元素的堆叠。具有较高值的元素位于较低值元素之上。每个元素的默认值为1.

将图像和导航条定位在海誓山盟之上

相关推荐