Question

我在我的网站上遇到了一个问题，我有一个固定在页面顶部的引导程序（版本2.3.2）navbar，然后在正文中我有一个引导程序collapse对象<pre><code>标记中包含大量内容。 collapse按预期打开和关闭;但是，当我向下滚动页面时，<pre><code>标记中的内容会与页面顶部的navbar重叠。我尝试将z-index添加到navbar和collapse内容中;但是，它似乎没有起作用。

以下是jsfiddle链接。违规重叠内容位于页面末尾。谢谢！
我的代码：http://jsfiddle.net/K3JAe/3/
全屏结果：http://jsfiddle.net/K3JAe/3/embedded/result/

Answer 1

.collapse类有position: relative，使其成为定位元素，并且您的导航栏具有来自Affix插件的position: fixed，使其也定位。手风琴后来出现在DOM中，这使得它在导航栏上堆叠。

@Adrift的修复是要走的路：页面顶部的附加元素需要z-index来堆叠在任何后来定位的元素上。为了您将来的z-indexing用途，我会高于2：

/* Stack .affix on top of positioned elements later in the DOM */
.affix {
  position: fixed;
  z-index: 100;
}

Answer 2

将z-index值添加到高于1的.affix类似乎可以解决问题：

.affix {
    position: fixed;
    z-index: 2;
}

http://jsfiddle.net/K3JAe/5/

Bootstrap v2.3.3 Navbar与Collapse内容重叠

2 个答案: