DIV層干擾鏈接

我有一些代碼如下，我認爲我的分層導致呈現的鏈接不可點擊。這個例子中的一些我已經轉換爲外部CSS類的樣式，以便於將其作爲一個小型用例進行編寫。目前正在現代瀏覽器上進行測試（最新的FF和Chrome版本）。DIV層干擾鏈接

<body> 

<!-- whole container needs to be at z-index of -1 --> 
<div id="container"> 

    <div class="corner" id="backgroundTopLeft"></div> 
    <div class="corner" id="backgroundTopRight"></div> 
    <div class="corner" id="backgroundBottomLeft"></div> 
    <div class="corner" id="backgroundBottomRight"></div> 

    <!-- whole container needs to be at z-index of 1 --> 
    <div id="container2"> 

     <div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div> 

     <div id="navigationSection"> 
      <a class="selected" href="#">Introduction</a><span class="menuDivider">|</span><a href="about.html">About</a> 
     </div> 

    </div> 

</div> 
</body>

而CSS

@charset "utf-8"; 

/* Default margin, padding and font-family */ 
* 
{ 
    font-family: Arial; 
    margin: 0px; 
    padding: 0px; 
} 

/* All images should have no borders by default */ 
img 
{ 
    border: none; 
} 

/* Global styling for links, uses black as the color */ 
a 
{ 
    color: #000000; 
    text-decoration: none; 
} 

a.selected 
{ 
    font-weight: bold; 
} 

a:hover 
{ 
    color:#FF00FF; 
} 

#container 
{ 
    position: relative; 
    z-index: -1; 
    height: 100%; 
} 

.corner 
{ 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    background-color: #172944; 
    z-index: -1; 
} 

#backgroundTopLeft 
{ 
    top: 0px; 
    left: 0px; 
} 

#backgroundTopRight 
{ 
    top: 0px; 
    right: 0px; 
} 

#backgroundBottomLeft 
{ 
    bottom: 0px; 
    left: 0px; 
} 

#backgroundBottomRight 
{ 
    bottom: 0px; 
    right: 0px;  
} 

#container2 
{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.8; 
    filter:alpha(opacity=80); 
    background-image:url('../images/groovepaper.png'); 
} 

/* The headerSection div, designed to fit in a centered logo */ 
#headerSection 
{ 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 70px; 
    padding-top: 54px;  
    height: 70px; 
    width: 250px; 
} 

/* The navigationSection div, designed to fit in the menu */ 
#navigationSection 
{ 
    padding-bottom: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px; 
    text-align: right; 
} 

.menuDivider 
{ 
    color: #666666; 
    padding-left: 5px; 
    padding-right: 5px; 
}

這一切都看起來很好（很多其他的純粹的顏色/字體大小類型的樣式應用），但foobar.html無法點擊。

我敢肯定，我已經做了一些錯誤的層次感，但我認爲使用Z-指數將梳理我..

來源

2012-07-01 Martijn Verburg

如果'1'而不是'0'，你嘗試過'z-index'嗎？ – HerrSerker

感謝您的快速響應，是的，我嘗試過，沒有運氣我很害怕 –

我認爲你在頂層的頁面上有其他東西。 – HerrSerker

做工精細http://jsfiddle.net/hPkTu/，如果問題是IE8，使用的z-index：1; IE8被稱爲是z-index這個特殊問題的buggy。

UPDATE你改變了你的問題，這裏是工作jsFiddle你更新的問題http://jsfiddle.net/VjTXu/2/。我將容器的z-index更改爲O，-1將它放在body下面，這就是爲什麼你的鏈接不可點擊，現在是。

來源

2012-07-01 19:01:24

你說的沒錯，我不好意思說我沒有檢查簡化的代碼。我現在編輯了Q併發送了真正的交易:-) –

@MartijnVerburg更新了答案。 –

非常感謝你！完全沒有想到:-) –

DIV層干擾鏈接

回答

相關問題