带有侧栏的Navbar在Bootstrap中

Question

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

但我得到了这个

我无法让导航栏出现在侧边栏的前面。

Answer 1

正确使用z-index，效果很好：

See it here

.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将导航栏＆＃34;放在＆＃34;上面。包装器......：

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

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

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

https://jsfiddle.net/ebvqcq26/