[英]Navbar with sidebar in Bootstrap
I have a navbar of bootstrap and a sidebar and I want to make this 我有一个bootstrap导航栏和侧边栏,我想做这个
but i obtain this 但我得到了这个
I can't make the navbar appear in front of the sidebar. 我不能让导航栏出现在侧边栏的前面。
Play with z-index
properly and it works good : 正确使用
z-index
并且效果很好:
.navbar{
margin-top: 20px;
position: relative;
z-index:2;
}
#sidebar-wrapper {
z-index: 1;
position: fixed;
top:0;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #8CCA59;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Use position:absolute
for the navbar (you may want this in a media query so it only applies to larger screens). 对导航栏使用
position:absolute
(您可能希望在媒体查询中使用它,因此它仅适用于较大的屏幕)。 Then add position:relative
to your #wrapper
. 然后添加
position:relative
对于#wrapper
。
You can then use z-index
to put the navbar "above" the wrapper...: 然后,您可以使用
z-index
将导航栏“置于”包装器“上方”:
Relevant CSS (I added an ID to your navbar): 相关的CSS(我在你的导航栏中添加了一个ID):
#navbar
{
position:absolute;
top:0;
right:0;
left:0;
z-index:100;
}
#wrapper {
position:relative;
z-index:50;
...
https://jsfiddle.net/ebvqcq26/ https://jsfiddle.net/ebvqcq26/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.