CSS Experts required - problems with Z-Index stack in my page design

Question

Howdy y'all!

Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.

You'll see at the URL...

http://howcode.com/code/

... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.

When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.

If anyone can post a workaround or alteration to my CSS that would be much appreciated.

Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!

Attached are a couple of screenshots to clarify what I mean:

1. This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):

2. This is what DOES happen when I adjust the Z-Index properties (I don't want this!):

Thanks y'all!

Answer 1

not the best solution but here it goes.

1. inside the content div move tabs div after codebg so this

<div id="content">
  <div id="tabs">
  </div>
  <div id="codebg">
  </div>
</div

becomes this

<div id="content">
  <div id="codebg">
  </div>
  <div id="tabs">
  </div>
</div

then add to #tabs

position:absolute; top:232px;

to #content

padding-top:53px;

this is a quick and dirty fix. otherwise you have to rethink your whole layout

Answer 2

You need to remove this:

z-index: -1 !important;

From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):

They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.

Answer 3

You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius