Z-index在FF中工作，不在Chrome中

我有兩個div，一個是由ID分別設置的z-index，另一個是由其類別設置的z-index ... 設置了z-index的div在如預期在Chrome 27（Windows 7）中的類不疊加...它運作良好，在Firefox 21Z-index在FF中工作，不在Chrome中

這裏是CSS：

.subMenuClass{ 
display: none; 
float: right; 
z-index: 1000; 
position:relative; 
padding: 20px 40px 20px 20px; 
width: 200px; 
height: 600px; 
} (doesn't work in Chrome) 

#theme_Div{ 
width: 220px; 
height: 600 px; 
z-index: 10000; 
position:absolute; 
margin: 20px 20px 20px 60px; 
} (works in Chrome)

HTML很簡單：

<div id="theme_Div" class="mainMenuClass"> 
<div id="subMenu" class="subMenuClass">

想法？我有幾十個這樣的'subMenus'，並且不必爲每個人創建一個CSS規則。

對不起，我忽略了一些重要的東西......您在subMenu類的上方看到的設置爲：display：none ...點擊「theme_div」中的按鈕後，顯示將變爲「內聯」。。在任何情況下，此代碼在Firefox中工作正常...

來源

2013-06-11 JasonBK

如果可能，請包含您的HTML代碼和[jsfiddle]（http://jsfiddle.net/）。 – showdev

我添加了HTML，那裏沒有太多... JSfiddle將是困難的B/C這個應用程序是內部的，並使用內部地圖服務。我希望這可能是我忽略的一件簡單的事情？ – JasonBK

「z-index」定義適用於Chrome 27.0.1453.110 Mac。 http://jsfiddle.net/sFZpU/1/ – showdev

以及這似乎在Firefox和Chrome中都可以工作。可能有人可以向我解釋爲什麼！

.subMenuClass{ 
display: none; 
/*float: right;*/ 
right: 0; 
z-index: 10000; 
position:absolute; 
padding: 20px 40px 20px 20px; 
width: 200px; 
height: 600 px;

}

#theme_Div{ 
width: 220px; 
height: 600 px; 
z-index: 10000; 
display:inline; 
position:absolute; 
margin: 20px 20px 20px 60px;

}

大變化改變子菜單的位置，以 '絕對'，並且替換 '浮動：右' 與 '右：0' .. 。絕對定位似乎對我來說是違反直覺的......但它起作用！

來源

2013-06-12 14:01:07 JasonBK

Z-index在FF中工作，不在Chrome中

回答

相關問題