爲什麼我的z-index聲明不工作？

我有一個菜單使用嵌套無序列表給出了輔助下拉菜單的外觀。這在大部分情況下運作良好。我最近對CSS代碼進行了重構，使其更清晰，更易於理解，但是現在我似乎無法獲得次級（下拉菜單）出現在頂層菜單後面。這兩個要素都聲明瞭立場。爲什麼我的z-index聲明不工作？

的HTML是相當簡單的，我不認爲這裏有任何問題：

<div id="header-menu"> 
    <ul> 
     <li><a href="#">what</a></li> 
     <li><a href="#">what</a> 
      <ul> 
       <li><a href="#">what</a></li> 
       <li><a href="#">what</a></li> 
       <li><a href="#">what</a></li> 
      </ul> 
     </li> 
     <li><a href="#">what</a></li> 
     <li><a href="#">what</a></li> 
     <li><a href="#">what</a></li> 
    </ul> 
</div>

的CSS，但是，在做的事情，我真的不明白。

#header-menu > ul > li { 
     font-size: 2em; 
     display: inline; 
     position: relative; 
     } 

    #header-menu > ul > li:hover { 
     background: #a4b0ac; 
     padding: 25px 0; 
     } 

    #header-menu > ul > li > a { 
     padding: 25px; 
     position: relative; 
     z-index: 100; 
     } 

    #header-menu li > ul { 
     display: none; 
     position: absolute; 
     z-index: 99; 
     background: #CC6601; 
     } 

    #header-menu li:hover > ul { 
     display: block; 
     } 

    #header-menu li ul > li { 
     font-size: 0.8em; 
     display: block; 
     position: relative; 
     } 

    #header-menu li ul > li a { 
     padding: 10px; 
     display: block; 
     } 

    #header-menu li ul > li a:hover { 
     background: #a4b0ac; 
     display: block; 
     }

來源

2010-02-23 Noah Chase

webkit（chrome）和firefox似乎都給了我相同的結果。 – 2010-02-23 16:54:27

編輯：最初誤解你的問題。

你不能把不同的z指數（Z-指數？）上嵌套在這種方式，因爲一個元素的內部本身不能躲在而它的其餘部分顯示元素。您必須取消嵌套這些，然後應用z-index，或者刪除應用於<a>的第一個z-index中的衝突引用。

來源

2010-02-23 18:12:02 Tom

這很有幫助，謝謝。 – 2011-01-07 03:27:59

我在Windows的Firefox 3.6中測試了它，它似乎工作正常。也就是說，二級菜單出現在主菜單下。也許你可以給我們一個你所看到的截圖嗎？

乾杯，斯科特

來源

2010-02-23 17:12:53

我在IE7中，FF3.5和Chrome（4.0.249.8）看着。

它在Chrome看起來很棒（下拉第二菜單項下），在IE7的下拉是第三個菜單項下，並在FF它是第一個菜單項下。這是問題的一部分嗎？如果是，我認爲這是一個「位置」（相對/絕對）問題與「z-索引」問題。

此外，關於z-index的，我相信只要你將沿着層次結構中的位置，IE瀏覽器重新設置的z-index堆棧。在你的例子中，css從「相對」變爲「絕對」。也許這與它有關呢？

來源

2010-02-23 19:04:33 KennyJacobson

爲什麼我的z-index聲明不工作？

回答

相關問題