将图像和导航条同时定位在一起
将图像和导航条同时定位在一起
提问于 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>现在它只显示了下面是纳瓦巴的图片。我已经尝试过将它们完全定位在父列/行上，但这是行不通的。
理想：
我现在拥有的是：
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-10-02 16:06:14
/* 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;
}Stack Overflow用户
发布于 2016-10-02 15:41:06
试着在你的CSS中把它变成绝对的
display: absolute;Stack Overflow用户
发布于 2016-10-02 16:02:58
尝试将z-index: 2添加到列表/列表项的CSS样式。Z-索引指定元素的堆叠。值较高的元素位于较低值元素的顶部。每个元素的默认值为1。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39818563
复制相关文章
相似问题
腾讯云开发者
