Z-index issue

HTML & CSS
1

Having a issue with the z-index on this page:
http://031863e.netsolhost.com/adept/whitepapers.php

When clicking download on the whitepaper the twitter bootstrap module pops up but is hidden behind a portion of the Main Nav Menu.

The menu is set to a z-index of 20, and the module at 1050;

Thanks
Ryan.

2

Hm, that link is not working. Is the site up? z-index issues are usually pretty simple to fix.

Edit: OK, it’s working now. (Took a few tries.)

Try bumping up the z-index on the section (around line 53 of the CSS):

section {
position: relative;
z-index: [COLOR="#FF0000"]100[/COLOR];
background: url(../images/content.gif) left top repeat-x #FDFDFD;
border-bottom: 1px solid #E8E7E6;
padding: 35px 0;
}
3

Thank you - That worked perfectly.

4

I am now noticing that after that z-index change, the drop down menu over “Services” is no longer working. Any other ideas?

5

Your going to have a lot of issues by directing setting a z-index value on every <section> element in your markup, what you should instead be doing is targeting ONLY the elements you need to sit higher in the DOM as that will eliminate the current issues you’re having.

6

Yes, I guess I should have said

section#content {
  z-index: 100;
}

But that still causes the same problem. An alternative would be to move the menu into the Content section, but that’s a bit of a pain.