Question

site: forus-group.com

I am trying to position the right navigation to overlap the sliding header images. No matter how high of a z-index I give it, it will not overlap the images, who’s parent sections have a z-index of 3. Both elements are, of coarse, positioned relatively to facilitate z-index.

Even when I try to give the images themselves a negative z-index, they still overlap the right column. Relevant CSS is below:

#right {
     width: 275px;
     position: relative;
     bottom: 175px;
     z-index: 50;
}

#tophead .cycleitem img {
     position: relative;
     z-index: 1;    
}

All other items (in the header) display correctly when given a z-index of 50. Thank you in advance.

EDIT: Site now reverted to broken state. Bug came up when trying to fix IE 7 and lower but now appears in modern brosers. I have the header at full height, with the content below. I then try to position the right column relatively with:

position: relative;
bottom: 175px;
z-index: 150;

Thanks again.

Answer 1

That’s because the menu is actually in a different document section than the header:

<header id="tophead">
    header image here
</head>
<section id="content">
    sidebar menu here
</section>

If you want the menu to overlap the header image, you’ll have to restructure the document. One hack-ish method would be to make the sidebar’s top: -313px, which matches the header’s height.