Z-index不适用于div - 我的代码有什么问题？

我一直在这个页面上工作一整天，我正在接近完成它，但有些事情没有道理。Z-index不适用于div - 我的代码有什么问题？

我有一个图像居中在<section>与图像底部的菜单。我写了一些脚本，当鼠标悬停在菜单中的<a>标记之一上时，位于所有内容之上的透明div的背景图像会更改为不同的图像。它似乎工作正常，除了事实，图像是在中心的图像，这是部分的一部分。这可能会让人困惑，但如果你跳到http://casperfitzhue.co.uk/totemindex.html的顶部并将鼠标悬停在“年轻的神”按钮上，你可以看到我的意思。

只有一半的蒙版出现在左侧，就好像它在主图像下面一样，尽管div的z索引高于主图像的z索引，所以这不应该发生。我还注意到，在Chrome的“检查元素”中检查代码时，Div的z索引似乎被删除，这意味着它没有被应用 - 我不明白为什么？

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

（A＃godsnav是菜单按钮）

任何帮助这个w应该很棒！谢谢

来源

2013-05-08 Casper F

有时还加入'的位置是：相对;'将使它没有'px' – iConnor 2013-05-08 22:20:27

z-index: 100; - 不添加px这个属性的值

来源

2013-05-08 22:18:35

WOW一起工作！这就是你一整天盯着屏幕时发生的事情！非常感谢！ – 2013-05-08 22:20:05

Z-index不适用于div - 我的代码有什么问题？

回答

相关问题