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 - 我的代碼有什麼問題？

回答

相關問題