Bootstrap 移动导航，想要 "drop over" 现有内容（z-index）

Question

我有一个使用 bootstrap 的移动导航，我想在现有内容下降时折叠它（而不是将内容向下推）。

我已经尝试设置 position: relative 和 z-index: 9999 我能想到的一切：

@media (max-width: 768px) {
.navbar-collapse {
    width: 200px;
    float: right;
    position: relative !important;
    z-index: 9999 !important;

}
.navbar {
    width: 200px;
    float: right;
    position: relative !important;
    z-index: 9999 !important;

}
.collapse {
    position: relative !important;
    z-index: 9999 !important;
}
}

到目前为止没有任何效果，有人知道修复方法吗？

Answer 1

您不应该为导航栏使用诸如相对属性之类的属性。如果您使用 bootstraps 固定导航栏，那么您将能够达到您想要的结果。

<nav class="navbar navbar-default navbar-fixed-top">

这是一个 fiddle 示例 http://jsfiddle.net/7ocbs21d/

Answer 2

像这样http://jsfiddle.net/7ocbs21d/1/

.navbar-static-top {
    position:absolute;
   width:100%;

}

Bootstrap 移动导航，想要 "drop over" 现有内容（z-index）

Bootstrap mobile nav, want to "drop over" existing content (z-index)

css

position

z-index

twitter-bootstrap