1

I am having an issue on my site where I have a bootstrap (version 2.3.2) navbar fixed to the top of the page and then later in the body I have a bootstrap collapse object with a large amount of content in <pre><code> tags. The collapse opens and closes as expected; however, when I scroll down the page, the content in the <pre><code> tags overlaps the navbar at the top of the page. I have attempted to add z-index's to both the navbar and the collapse content; however, it doesn't seem to be working.

Below are the jsfiddle links. The offending overlapping content is at the end of the page. Thanks!
My code: http://jsfiddle.net/K3JAe/3/
Full Screen Result: http://jsfiddle.net/K3JAe/3/embedded/result/

4

2 回答 2

3

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

@Adrift 的解决方法是：页面顶部的附加元素需要 az-index堆叠在任何后来定位的元素上。2对于您未来的 z-indexing 用途，我会比虽然更高：

/* Stack .affix on top of positioned elements later in the DOM */
.affix {
  position: fixed;
  z-index: 100;
}
于 2013-08-14T16:03:45.623 回答
2

向 1 以上的类添加一个z-index值.affix似乎可以解决问题：

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

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

于 2013-08-14T14:48:08.253 回答