Absolute position does not work in a fixed menu

Question

I have a following problem, I have a div no body with absolute position, and I have a menu where it is fixed, you have sub-menus and to open them you must pass the mouse over the menu,.

Fiddle to understand better:

http://jsfiddle.net/L6575yr0/5/

Note: I know that removing Fixed from the resolve menu, but it is not possible to do the same because you want to have the menu on the side when you have more content..

Answer 1

Add the z-index:999; to class menu also.

.menu
{
    ...
    z-index:999;
}

Edit: to document for posterity:

The z-index is equivalent to the position in the Z coordinate; the Z axis is taken as the one that "exits" from the screen and grows towards the user’s face. That is, the higher the Z index, more to "near" the user the element will, overlapping those with lower Z-coordinate.

The value of 999 was a suggestion, since you already use z-index: 1 and z-index: 999 and this seems to work well (there was no complaint regarding the initial layout of the components, only in relation to menu items).

However, as @Felipestoker pointed out, you can do a study of the coordinates according to organizing the sequence in which the items overlap in the Z axis. If, for 2 elements A and B, there is no competition for space in the XY plane (A will never overlap B), the same value of z-index can be applied to both without prejudice.

Answer 2

It’s not necessary for you to use z-index:999 in everything. You need to analyze the structure and apply the z-index increasingly:

For example:

You can put in the .menu one z-index:2, for the separator has z-index:1, and are distinct Ivs.

I mean, the right thing to do is to:

.menu
{
    position: fixed;
    border: 1px solid #ddd;
    width: 47px;
    float:left;
    background:#ccc;
    z-index: 2;

}