Menu
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
236
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
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).
css("z-index", ''); Extract from the documentation : Setting the value of a style property to an empty string — e.g. $('#mydiv'). css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .
You need to define positioning for #primaryNav. Z-index only affects positioned elements. I just added this in firebug and it fixed:
#primaryNav { position: relative; } I would avoid using a negative z-index. Simply change z-index of #page to 0.
158
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
