帶有側欄的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/