Question

I’m having some problems with z-index and positioning. Basically, when you hover over the menu items (home, about etc), paint splashes should load underneath the menu:

http://www.saradouglas.net/home

Stylesheet is located here.

This worked fine when each splash div was set to absolute positioning, but I realised that these would appear in different places in different screen resolutions. I thought it would just be a case of changing this to relative positioning, and then adjusting the co-ordinates accordingly. Unfortunately now my splashes don’t appear under the menu, like they should.

To clarify, I want the splashes to appear under the menu – so the menu should always appear on top of the splashes. This has only become a problem since setting the menu to relative, and these splashes to absolute.

I’m hoping this is a simple one to fix and I’m just missing something. I’m hoping someone here can tell me where I’ve gone wrong and offer a solution!

There have been some good answers submitted so far but unfortunately they have not fixed my problem. I have tried adding the menu background to the ul class rather than the div, but this has made no difference to the problem.

Answer 1

If I recall correctly the precedence order of z-indices is something like this:

• canvas (where the element is drawn / parents drawable area)
• bg images
• z-index: -1
• default (0)
• z-index: 1+

When you give any child element a z-index of -1, it won’t go below the parent’s background because of the parent’s precedence.

Here is your solution (just tried on firebug and it works):

1. Remove the bg image from #menu and add a separate div under the ul.menu before the li‘s.
2. Give the css below to this div.
3. Now give all those brush strokes a z-index smaller than -1. -2 works.

And that should be it.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

I know it’s not that much semantic but, hey it works, right? 😛