index issue with twitter bootstrap dropdown menu

I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.

It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.

If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.

The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.

Appreciate any help you can give me.

I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.

Thanks.

---

Just realized what's going on.

I had the navbar inside a header which was position: fixed ;

Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !#@!?

Thanks.

---

IE 7 on windows8 with bootstrap 3.0.0.

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

fixed

---

Ran into the same bug here. This worked for me.

.navbar {
    position: static;
}

By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.

链接地址: http://www.djcxy.com/p/75950.html

上一篇: 下拉onclick不悬停

下一篇: 索引问题与twitter引导下拉菜单