将图像和导航栏置于彼此之上

Posted 2023-02-16

【中文标题】将图像和导航栏置于彼此之上

【英文标题】：Positioning Image and Navbar on top of eachother

【发布时间】：2016-10-02 15:30:15

【问题描述】：

我一直在努力解决这个问题，但找不到方法。 所以我有一个引导列，带有一个白丝带（图像），我试图将引导导航栏定位在这个白丝带的顶部。

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

现在它只显示带有导航栏的图像。我已经尝试将它们都与父列/行相对定位，但它不起作用。

理想：

我现在拥有的：

【问题讨论】：

你试过把img元素放在nav元素里面吗？

【参考方案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;

【讨论】：

通过给div一个relative位置并且它包含元素（img和nav）一个absolute位置，你可以定位两个元素相对 到它们的父元素 div。 z-index 允许您将元素堆叠在一起。具有较大数字的一个堆叠在另一个之上。我使用right: 0px 将元素0px 的右边缘 放置在远离div 右边缘的位置，但您可以使用其他位置属性top、bottom 和@987654334 @ 以获得您想要的外观。希望这能解决您的问题

【参考方案2】：

尝试在你的 CSS 中使其绝对化

display: absolute;

【参考方案3】：

尝试将z-index: 2 添加到列表/列表项的 CSS 样式中。 z-index 指定元素的堆叠。具有较高值的​​元素位于较低值元素的顶部。每个元素都有一个默认值 1。