title: Z-Index Not Working - Alternative Technique or Fix
body: <p>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 <a href="http://ninjawarrior.info/new/" rel="nofollow">here</a> (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</p>
  
  <pre><code>#headerfull {
  position:absolute;
  top:-100px;
  left:0;
  z-index:10000;
  width:100%;
  height:100px;
  background-color:#000000;
  opacity:.7;
  display:none;   
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site"&gt;
  </code></pre>