需要CSS專家 - 我的頁面設計中Z-Index堆棧的問題

基本上我在Z-Index上遇到一些問題。儘管我對CSS並不感興趣，但我認爲我相當好，但真的無法解決這個問題。需要CSS專家 - 我的頁面設計中Z-Index堆棧的問題

您會在網址看到...

http://howcode.com/code/

...那我的問題是，在返回的「人氣王」結果鏈接無法點擊或任何東西。我已經得出結論，這是由於他們的Z指數被搞砸了。我不得不用Z-Index調整和調整以獲得標籤 - 熱門，最高評分，特色等 - 以顯示在codebg div上方。

當我調整Z-Index使得結果絕對在最前面時，它們就像正常一樣 - 可以選擇文本，評級圖像懸停等等。然而，其缺點是我的Popular，Top評分，精選標籤都放在BENEATH背景圖片上以獲得返回結果。

如果任何人都可以發佈解決方案或更改到我的CSS將不勝感激。

請不要忘記這是一個測試網站和設計和任何其他URL可能不起作用，我還沒有上傳任何數據庫配置或任何！

隨附的是一對夫婦截圖的澄清我的意思：

這是我希望發生的（不是在實際上這個截圖鏈接是無法點擊，只是爲了演示我的觀點雖然）： what i want http://i39.tinypic.com/20usq36.png
當我調整Z-索引屬性（我不希望這這是確實發生了！）： oh noes! http://i39.tinypic.com/2z6hwsx.png

謝謝你們啦！

來源

2010-04-11 Jack

幫不了你，但我喜歡你的佈局的整潔。祝你好運！ – Drew 2010-04-11 11:51:50

對於一個完美的**問題+1。 – 2010-04-11 12:18:36

您需要刪除此：

z-index: -1 !important;

從你.codebg類，這將導致你的＃2上面的截圖。（作爲一個側面說明，孩子們不能有比他們的父母更高的z-index，所以.codbg裏面的所有東西都是-1，在頁面後面）然後，你需要修復標籤圖片:)問題不在於它們是在背景之後，就是它們是透明的，在黑暗的背景之上看起來更暗。這裏的圖像（可以在這個答案改變，一旦你更新，直接指向它）：

alt text http://howcode.com/images/tabs.png

他們看起來在這裏很好，因爲白色背景，但如果你在編輯器中打開它們，你他們會發現它們是透明的，只是使三個標籤完全（或至少更多）不透明，因爲這似乎是你以後的事情。

來源

2010-04-11 12:04:45

感謝尼克的偉大答案。我把你所說的話帶到了船上，但我不認爲這是100％正確的。當將不透明度設置爲100％時，我仍然可以獲得相同的效果 - 而且我確定這些選項卡是BENEATH另一個div，因爲我無法點擊它們 - 除了頂部的幾個像素點之外（暗示它會是在......下面......）這有道理嗎？ – Jack 2010-04-11 15:29:13

不是最好的解決方案，但它在這裏。

內容的div標籤移動DIV中codebg所以這

<div id="content"> 
    <div id="tabs"> 
    </div> 
    <div id="codebg"> 
    </div> 
</div

後成爲該

<div id="content"> 
    <div id="codebg"> 
    </div> 
    <div id="tabs"> 
    </div> 
</div

然後添加到#tabs

position：absolute;頂：232px;

到＃內容

填充頂：53px;

這是一個快速和骯髒的修復。否則，你必須重新考慮你的整個佈局

來源

2010-04-11 12:04:40

你也可以把你從background-image上code-bg代替content，並調整內容的寬度和邊界半徑

來源

2010-04-11 12:17:07 Patrick

需要CSS專家 - 我的頁面設計中Z-Index堆棧的問題

回答

相關問題