Search code examples
cssz-indexpositioning

Z-Index and Relative/Absolute Positioning

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.

Solution

  • 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? :P