Z-Index and Relative/Absolute Positioning

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 submit…

Accepted Answer

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

- Remove the bg image from `#menu` and add a separate `div` under the `ul.menu` before the `li`'s.

- Give the css below to this `div`.

- 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

Z-Index and Relative/Absolute Positioning

Solution

Problem