z索引不适用于div -我的代码有什么问题

Question

我一整天都在做这一页，我快要完成了，但是有些地方不太合理。

我有一个图像在<section>的中心，在图像的底部有一个菜单。我已经写了一些脚本，以便在菜单中的<a>标签之一悬停时，透明div的背景图像是在一切的顶部改变为不同的图像。它似乎工作得很好，除了这个事实，图像是后面的中心图像，这是部分的一部分。这可能令人困惑，但你可以看到我的意思，如果你到http://casperfitzhue.co.uk/totemindex.html的顶部，并悬停在"Young Gods"按钮。

只有一半的蒙版出现在左边，就好像它在主图像的下面一样，尽管div的z-index高于主图像的z-index，所以不应该发生这种情况。我还注意到，当检查代码在Chrome的"检查元素"，Div的z-index似乎被划掉，这意味着它没有被应用-我不明白的是为什么?

这是HTML:

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

这是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;
}

和这是JAVASCRIPT:

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

(#godsnav是菜单按钮)

任何帮助这将是惊人的!谢谢你

Answer 1

z-index: 100; -不要将px添加到此属性的值