CSS/jQuery下拉菜單。 Z-Index沒有像預期的那樣工作

我有一個連接到固定導航欄的下拉菜單。與當前的Twitter設計使用的類似。CSS/jQuery下拉菜單。 Z-Index沒有像預期的那樣工作

這裏是鏈接到這個問題：http://jsfiddle.net/JDahp/3/（這已被更新，以遠遠超過以前的迭代更簡單）

使用jQuery使菜單顯示/消失，工作正常。該菜單在工具欄上進行動畫製作而不是在其下面進行。

我不明白爲什麼z-index不覆蓋通常的下拉菜單的視覺堆疊？

下面是相關的CSS屬性

#top-stuff{ 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:12; 
    width:100%; 
} 

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

一個砍下HTML的版本：

<div id="top-stuff"> 
    <a href="" class="optionslinka">Options</a> 
    <div class="dropdown" id="optionsdropdown"> 
     <!-- Drop down content is here --> 
    </div> 
</div>

來源

2011-05-26 Chris

你在這裏使用什麼瀏覽器，你可以鏈接到一個例子？ – Treemonkey 2011-05-26 15:14:08

我已經在IE和FF測試過 - 都有同樣的問題。無法輕鬆提供示例，它是不在線的客戶端的代碼。 – Chris 2011-05-26 15:15:17

你可以在這裏放置一個原型：jsfiddle.net – corroded 2011-05-26 15:15:51

你的小提琴是一個有點複雜和忙碌，我通過看，但我認爲這是有可能您的問題涉及IE已知的z-index錯誤（但也影響了其他瀏覽器）。

基本上，如果z-index未在所有父容器上定義，那麼每個z-index將啓動一個新的「堆疊上下文」，這意味着它們不會正確重疊。想想2副牌而不是1副牌。

嘗試設置上的所有父容器的上述.dropdownposition:relative;z-index:auto;（或任何其他position:像absolute等）

一些資源，以瞭解更多：
下拉菜單的問題：http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
的深入瞭解：http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

類似的問題給你：http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

您會注意到，任何帶有任何z-index的定位元素都位於代碼中低於菜單的位置，它將出現在菜單上方 - 無論z-index菜單是什麼 - 完全相反你想要發生。

來源

2011-05-26 16:41:52

嘿，感謝您的建議，但這樣做仍然行不通 - 我用更簡單版本的代碼更新提琴手 – Chris 2011-05-27 08:12:36

我也迷失了，我把你的小提琴整理成了肉，每一個你應該說的話都不是這樣，這就是我得到的東西，並且厭倦了它，而不是很好玩，http：// jsfiddle。淨/ ecSv8 / – 2011-05-27 18:56:59

我刪除了所有的z-index位，只是把

z-index: -1;

在此

#optionsdropdown

這似乎工作，我相信，從包含元素的問題源於其位置固定..

來源

2011-05-26 15:37:54 Treemonkey

如果我將它設置爲-1它落在頁面上的內容:( – Chris 2011-05-26 15:48:45

是的，認爲可能發生你似乎有幾個div的真正做任何事情，清除它們可能幫助 – Treemonkey 2011-05-26 15:54:34

他們在那裏爲其他內容進去，我剝去了所有的演示 – Chris 2011-05-26 15:58:02

CSS/jQuery下拉菜單。 Z-Index沒有像預期的那樣工作

回答

相關問題