带有侧栏的Navbar在Bootstrap中

Question

我有一个bootstrap导航栏和侧边栏，我想做这个

但我得到了这个

我不能让导航栏出现在侧边栏的前面。

Answer 1

正确使用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;
}

Answer 2

对导航栏使用position:absolute （您可能希望在媒体查询中使用它，因此它仅适用于较大的屏幕）。 然后添加position:relative对于#wrapper 。

然后，您可以使用z-index将导航栏“置于”包装器“上方”：

相关的CSS（我在你的导航栏中添加了一个ID）：

#navbar
{
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:100;
}

#wrapper {
  position:relative;
  z-index:50;
  ...

https://jsfiddle.net/ebvqcq26/