Z-Index and Relative/Absolute Positioning [closed]

问题

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.

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

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

回答2:

You should set position relative in your menu div, then add absolute positioning divs in menu's div. then the different screen resolutions it isn't problem.

回答3:

You can do it by simply setting bg, paddings and height on ul instead of <div id="menu">

来源：https://stackoverflow.com/questions/10322868/z-index-and-relative-absolute-positioning

标签

css

z-index

positioning