css - Z-index 适用于 FF，不适用于 Chrome

Question

我有两个 div，一个按 ID 单独设置 z-index，另一个按其类设置 z-index ... 在其类中设置 z-index 的 div 在 Chrome 27 中没有按预期堆叠（Windows 7 )...它在 Firefox 21 中运行良好。

这是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">

想法？我有几十个这样的“子菜单”，并且不想为每个单独创建一个 CSS 规则。

抱歉，我遗漏了一些重要的内容...您在上面看到 subMenu 类设置为：display:none...在单击“theme_div”中的按钮后，显示更改为“inline”...无论如何，此代码在 Firefox 中运行良好...

Answer 1

好吧，这似乎在 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”……绝对定位对我来说似乎违反直觉……但它有效！