Z-index works in FF, not in Chrome

Question

I have two divs, one with the z-index set individually by ID, the other with z-index set by its class... The div with z-index set in its class does not stack as expected in Chrome 27 (Windows 7)...it works well in Firefox 21.

Here is the 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 is simply:

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

Ideas? I have several dozen of these 'subMenus' and would rather not have to create a CSS rule for each one individually.

Sorry, I left out something important...you see above the subMenu class is set to :display:none...the display changes to 'inline' upon a click of a button in the 'theme_div'... in any case, this code works fine in Firefox...

Please include your HTML code and a [jsfiddle](http://jsfiddle.net/), if possible. — showdev, Jun 11 '13 at 19:27
I added the HTML, there isn't much there...A JSfiddle would be difficult b/c this app is internal and uses internal map services. I am hoping this may be something simple that I overlooked? — JasonBK, Jun 11 '13 at 19:38
The `z-index` definitions work for me in Chrome 27.0.1453.110 Mac. http://jsfiddle.net/sFZpU/1/ — showdev, Jun 11 '13 at 19:45
this question might help: http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — Thomas Jones, Jun 11 '13 at 19:46
I notice when I change the position on the subMenu to 'absolute'..it stacks on top of the 'theme_div" (and also does not 'float:right')..? — JasonBK, Jun 11 '13 at 20:05
I added something important to my question above...I should mention also I am using JQuery to change the display attribute. — JasonBK, Jun 12 '13 at 12:45

score 0 · Answer 1 · answered Jun 12 '13 at 14:01

well this seems to work in both Firefox and Chrome..maybe someone can explain to me why!

.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;

}

The big change was changing the position of the subMenu to 'absolute', and replacing 'float:right' with 'right: 0' ... the absolute positioning seems counter-intuitive to me....but it works!

Z-index works in FF, not in Chrome

1 Answers1