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

想法？我有几十个'subMenus'，而不是必须为每个单独创建一个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;

}

最大的变化是将subMenu的位置改为'absolute'，并将'float：right'替换为'right：0'......绝对定位对我来说似乎是违反直觉的....但是它有效！

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

1 个答案: