Need tabs to appear "under" the #wrap div

HTML & CSS
1

URL: http://bit.ly/gLgj2Z

See the 3 tabs on the right side of the page? I want those to appear “under” the #wrap div. I tried using z-index, but it didn’t work. What am I missing?

Thanks for any help!

2

I only see z-index:9999 in your .css file. In order for z-index to work, you need to have different valued z-indexes. The one on top should be the higher numbered z-index

3

All the ones set to 9999 in the css are related to navigation menus. I set the #wrap to z-index: 999 and the ul.tabs to z-index: 1 and it doesn’t work.

And I notice that when I add the z-index to the #wrap, my footer disappears.

So confused…

4

I thought about that, but was hoping that since the tabs are absolutely positioned, they would go behind using z-index. Hmmm…

5

Okay, by removing the z-index from #wrap and giving the ul.tabs a negative z-index, they are now displaying correctly. However, now the jquery slide out feature is not working. I am using the technique described here: Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops. Do you know how I might make this work with the tabs back there?

6

Hmmm … strange. I suspect it may be because the tabs are inside #wrap, and so they can’t go behind their parent/ancestor elements, or something along those lines … but that’s just a guess!

7

Hello, in fx this works. remove the negative margin form the tabs. and add position relative and background #fff to #inner, and move it up one px…

#inner {
background:#fff;
position:relative;
margin:19px auto;
}

8

Eric, that’s awesome!! Thank you so much. I would never have figured that out. :slight_smile: