Menu
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.
867
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.
In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don't apply a z-index , the elements will be stacked in the order they are written in the HTML. Check this example: HTML.
If I recall correctly the precedence order of z-indices is something like this:
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):
#menu and add a separate div under the ul.menu before the li's. div.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
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
