CSS z-index沒有正確響應 - 隱藏在內容下面的子菜單

我創建了一個頁眉功能區菜單（頁面頂部的水平菜單），當它懸停在其鏈接上時，會爲每個菜單打開一個子菜單，應顯示在主要內容的頂部。CSS z-index沒有正確響應 - 隱藏在內容下面的子菜單

問題是子菜單在主內容下面呈現。

我試圖爲子菜單z-index設置一個更高的值，但這並沒有幫助。

當我將主要內容的z-index設置爲-1（0也不起作用）時，子菜單出現，但內容中的所有按鈕都不起作用。

我搜索我的整個CSS，甚至沒有一個z-index作業。

更新

內容DIV的樣式：

#content { 
    background: #fff; 
    position: absolute; 
    top: 176px; 
    bottom: 25px; 
    padding: 20px 0px 63px; 
    overflow: hidden; 
}

來源

2012-12-31 Shimmy

請張貼一些CSS和/或HTML代碼，否則就無法準確地確定問題 – cppanda

，我不知道該怎麼貼，我有很多的地獄CSS和HTML。我可以肯定地說是，我已經檢查了我所有的CSS和'Z-index'沒有設置甚至有一次，我正在尋找線索，這將有助於我確定問題。 – Shimmy

以及至少涉及的div的z-index和位置，以及div的html順序/層次結構 – cppanda

如果您的菜單和#content塊都已絕對定位，則需要在它們兩個上設置正z-index值以允許重疊（菜單中Z-index高於內容）。

CSS：

#content { 
    background: #fff; 
    position: absolute; 
    z-index: 1; 
    top: 176px; 
    bottom: 25px; 
    padding: 20px 0px 63px; 
    overflow: hidden; 
} 

#menu { 
    z-index:10; 
}

來源

2012-12-31 04:34:23

你懂了！ – Shimmy

好吧，當我給你答案你還沒有添加你的CSS！但是@lota已經給他解決了你的問題+1！ –

-1

可能出現的錯誤：

你的菜單DIV容器可能有負的z-index。
你的身體或包裝可能有一個非常大的Z值。

解決方案：

刪除所有的z-index，只是複製菜單的代碼並將其粘貼在身上的標籤或包裝div標籤的結束。您還可以添加z-index：99;到子菜單。
從Body或Wrapper中刪除z-index並將z-index添加到菜單中。

來源

2012-12-31 04:22:51

就像我已經說過的那樣，我搜索了所有的CSS，並且'z-index'屬性甚至沒有設置一次，也沒有作爲內聯樣式出現在HTML中。 – Shimmy

你爲懸停元素設置了什麼位置？ z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。

的問題可能是在你的HTML，而不是你的CSS，爲e.g如果您忘記關閉一個元素，它可能會重疊其他元素。

無論哪種方式，這將是很大的幫助，如果你添加了一些代碼，你的問題。

來源

2012-12-31 04:27:50 TDsouza

這兩個都是定位，文件驗證。問題依然存在。 – Shimmy

CSS z-index沒有正確響應 - 隱藏在內容下面的子菜單

回答

相關問題