Z-index和鏈接可訪問性

我已經看了一下，但是我還沒有找到適用於我的特定問題的解決方案。我有一個作爲背景的div，所以它必須位於其他元素下面，然後另一個必須低於該背景，但仍允許鏈接工作。Z-index和鏈接可訪問性

基本的HTML結構是這樣的：

<div class="wrap"> 
    <div class="cover"></div> 
    <div class="container"> 
    <div class="elem"> 
     <a href="#">Link</a> 
    </div> 
    </div> 
</div>

而CSS是：

.cover { 
    position: absolute; 
    z-index: -1; 
} 

.elem { 
    position: relative; 
    z-index: -2; 
} 

.elem a { 
    position: relative; 
    z-index: 10; 
}

的jsfiddle片斷here。

來源

2014-06-25 Ana Vulcan

我有一種感覺，這裏有一個#divitis的例子來產生特定的效果。如果我們知道這應該看起來如何，它可能會更容易。 –

我看了一下小提琴，並且略微擔心這對真實內容的可用性有多大。 –

我看不到一個理由使用負z-index，因爲這應該工作：

.cover { 
    position: absolute; 
    z-index: 1; 
} 

.elem { 
    position: relative; 
    z-index: 0; 
} 

.elem a { 
    color: white; 
    /* not needed */ 
    /*position: relative; 
    z-index: 10;*/ 
}

Demo

來源

2014-06-25 15:01:30 melancia

嗡嗡聲，這很有趣，雖然我同意堆棧層次的正數通常應該足夠了，但我不明白爲什麼它不應該工作，因爲它在[spec]（http://www.w3.org /TR/CSS2/visuren.html#propdef-z-index）：'子負載棧級別的上下文（最負的第一個）' – DrCopyPaste

@DrCopyPaste它不起作用的原因是因爲負Z指標值（[有時]（http://philipwalton.com/articles/what-no-one-told-you-about-z-index/））導致元素出現在他們自己的父母身後。 – TylerH

謝謝@TylerH澄清它。 – melancia

-1

這是正確的答案...

<div class="wrap"> 
    <div class="cover"> 
     <div class="container"> 
      <div class="elem"> 
       <a href="#">Link</a> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.cover { 
    height: 200px; 
    width: 300px; 
    margin-left: 100px; 
    margin-top: 50px; 
    background-color: orange; 
    position: absolute; 
    z-index: 0; 
} 

.elem { 
    background-color: green; 
    height: 150px; 
    width: 250px; 
    position: relative; 
    z-index: 2; 
} 

.elem a { 
    color: white; 
    position: relative; 
}

來源

2014-06-25 15:07:34

什麼區別這裏我的答案公佈10分鐘前？ – melancia

所不同的是這一次說，這是正確的。很明顯。 –

蓋被包木窗，我改變了HTML是從用戶後diferent所有元素。歡呼，我其實不需要複選標記，我只是在回答幫助某人。 –

Z-index和鏈接可訪問性

回答

相關問題