Z-Index Not Working - Alternative Technique or Fix

Question

I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code

#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;   
}

but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below

<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">

Answer 1

Add this css:

#header {
    position: relative;
    z-index: 10000;
}

z-index works on containers with the same stacking context.

In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.

The most easy way of memorizing this rule is by "code versioning":

<DIV with z-index=1>
    <DIV with z-index=3/>   
</DIV>
<DIV with z-index=2>

So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.

Other than that, you need to apply positioning to each DIV which sets z-index.

I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.

Thank you.

Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context