Search code examples
javascriptjqueryhtmlcssz-index

Z-index not applying to div – What is wrong with my code?

I've been working on this page all day and I'm getting close to finishing it, but something's not making sense.

I have an image centered in a <section> with a menu at the bottom of the image. I've written some script so that when hovering over one of the <a> tags in the menu, the background-image of a transparent div which is on top of everything changes to a different image. It seems to work fine, apart from the fact that the image is BEHIND the centered image which is part of the section. This might be confusing, but you can see what I mean if you go to the top of http://casperfitzhue.co.uk/totemindex.html and hover over the "Young Gods" button.

Only half of the mask appears on the left hand side, as if it is underneath the main image, although the z-index of the div is higher than the one of the main image so this shouldn't happen. I also noticed when checking the code in Chrome's "Inspect Element" that the z-index of the Div appears to be crossed out, which means it is not being applied – what I don't understand is why?

THIS IS THE HTML:

 <section id="cover">
  <div id="maskover"></div>
   <img src="coverimage.png" id="coverimage" width="1180" height="800" alt="cover photo">   
 </section>

THIS IS THE CSS:

#maskover{
  height:424px;
  width:366px;
  position:fixed;
  left:0px;
  top:0px;
  z-index:300px;
  background:none;
  background-image:url(invisible.png);
}

section#cover {
  background:url(noise.png) #170e56;
  height: 830px;
  width: 100%;
  padding: 0px;
  position: relative; 
  text-align:center;
}

#coverimage{
  width:1180px;
  position:absolute;
  top:0px;
  left:50%;
  margin-top:0px;
  margin-left:-590px;
  z-index:200px;
}

AND THIS IS THE JAVASCRIPT:

$('a#godsnav').hover(function() {
  $('div#maskover').css('background-image', 'url(overlaymask1.png)');
}, function() {
  $('div#maskover').css('background-image', '');
});

(a#godsnav is the menu button)

Any help with this would be amazing! Thank you

Solution

  • z-index: 100; - don't add px to the value of this property