子div背後的父div，如何修復鏈接？

我試圖在其父母<div>後面放一個兒童<div>（帶有鏈接），但鏈接不起作用。子div背後的父div，如何修復鏈接？

我使用的是z-index: -1，所以也許鏈接被繪製在<body>的「後面」。

有沒有辦法實現這一點，而不會中斷鏈接？

感謝

的CSS

.front { 
     width: 200px; 
     height: 200px; 
     background: #EA7600; 
     -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3); 
     -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3); 
     box-shadow: 5px 5px 5px rgba(0,0,0,0.3); 
    } 

    .back { 
     width: 300px; height: 50px; background: #93CDFB; 
     position: absolute; 
     left: 100px; 
     text-align: right; 
     padding: 5px; 
    }

的HTML

<div class="front"> 

<div class="back"> 

<a href="http://www.stackoverflow.com">This link works</a> 

</div> 

</div> 


&nbsp; 


<div class="front" style="z-index: 1"> 

<div class="back" style="z-index: -1"> 

<a href="http://www.stackoverflow.com">This link doesn't work</a> 

</div> 

</div>

結果

alt text http://img832.imageshack.us/img832/8137/screenshot20100723at105.png

來源

2010-07-24 Victor

我剛剛花了半個小時閱讀（非常複雜的）CSS specs，但我對定位元素和堆疊上下文有點困惑。然而，在擺弄之後，我發現

body { 
    position: relative; 
    z-index: 0; 
}

實際上工作！所以確實

body { 
    position: absolute; 
}

這將會把body元素到一個新的備貨情況下，這意味着該機構（不是HTML）將作爲一個canvas到.back股利。

來源

2010-07-24 07:23:13 user123444555621

謝謝！完美工作！ – Victor 2010-07-24 16:45:16

也許用於前一個：顯示：內聯或浮動：左

來源

2010-07-24 03:09:40 BobTurbo

謝謝，但不工作 – Victor 2010-07-24 03:13:48

確實存在。如果您檢查這jsfiddle，你會看到它的行動。

正如你懷疑的那樣，這是-1 z-index給你帶來麻煩。通過將橙色容器移出橙色容器並向橙色容器提供Z-索引，您可以保持堆疊順序，並且鏈接仍然有效。

來源

2010-07-24 03:16:23 Pat

謝謝帕特，但我無法改變這個事實，即藍綠色的盒子是橙色的盒子。有沒有辦法做到這一點，而不觸及Html？ – Victor 2010-07-24 03:18:51

不幸的是，正如你發現的那樣，在其父母下面堆疊一個孩子最好是粗略的。說實話，我甚至從來沒有嘗試過一個負Z指數，所以我對結果感到驚訝。 – Pat 2010-07-24 03:20:55

-1

給孩子鏈接一個更大的z-index如何？

所以對於CSS

.back a { 
    z-index: 50 
}

&讓別人像目前這樣？

來源

2010-07-24 05:28:08

謝謝，但沒有工作 – Victor 2010-07-24 16:43:03

子div背後的父div，如何修復鏈接？

回答

相關問題