Search code examples
cssxhtmlz-index

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

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): what i want

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

Thanks y'all!

Solution

  • 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):

    alt text http://howcode.com/images/tabs.png

    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.