将图像和导航栏定位在彼此之上

Question

我一直致力于此，但找不到方法。所以我有一个 bootstrap 列，带有一个白丝带（图像），我试图将 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

尝试在您的 CSS

中将其设为绝对

display: absolute;

Answer 2

尝试将 z-index: 2 添加到您的 list/list 项的 CSS 样式中。 z-index 指定元素的堆叠。具有较高价值的元素位于较低价值元素之上。每个元素的默认值为 1。

Answer 3

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

将图像和导航栏定位在彼此之上

Positioning Image and Navbar on top of eachother

html

css

css-position

menubar

twitter-bootstrap