Fun with z-index :(

Here is a link to my site:
http://0stage.justmedicalDOTbiz/

Yesterday I gave that site a tiled background, then applied a shadow effect. The site has space between the top two sections, header content and main page content. Because of this, a drop shadow below the header fell onto the main page.

To get it to look right, I applied z-index like this:

#headerWrapper {
position: relative;
z-index: -1;
}

#topmenubar {
z-index: 0;
}

Now it looks the way I wanted it... but you can't click on any of the links in the header (Shopping Cart, About Us, etc).

Can somebody school me on z-index? How can I fix this?

Thanks!

Never mind, I figured it out. Mod, please feel free to delete this thread.

Posting in this forum is like getting up from the table to use the restroom at a restaurant. As soon as you do, the food will finally arrive.

Haha.

Why don't you reduce the box shadow ?
And remove the z-index

Btw, in "figuring it out" what was your solution?

mc12345678:

Btw, in "figuring it out" what was your solution?

Typically I do post my solutions. Once found, I come back and post an explanation with a step-by-step answer for replicating the solution.

The reason I didn't do it this time was that I don't fully understand css, I'm uncertain of the 'why', and I didn't want to mislead anybody with wrong info.

But since you ask, here it is.
.
.
.
.
+++
Explanation (take with a grain of salt):
CSS loads from top to bottom. The first thing it loads is layer 1, the second is layer 2, and so on. If you want something that loads later to layer above the previous, you give it a higher index.

When I posted initially, I was trying to send first loading stuff back a layer. Why that didn't work correctly, I'm not sure, probably something to do with how later elements loaded.

In the end, all I really needed to do was bump up later loading stuff to the same layer as the header stuff. Ultimately, I applied a bump (z-index: 1;) to contentMainWrapper and footer.
+++
.
.
.
.
I'm still not completely satisfied with that because it applies effects twice, which creates a weird little gap in the shadow between main page and footer.

What I think I really should do is go into the main page (/includes/templates/MY_TEMPLATE/common/tpl_main_page.php) open a div just above "contentMainWrapper" and then open the footer (tpl_footer.php) and close my div after the last </div>.

Then I could z-index just my new div and apply shadow effects just to it.

However, ultimately I scrapped that look and decided to stick with a more simple look.