I have a following problem, I have a div in the body with absolute position, and I have a menu where it is fixed, there are sub-menus and to open them one must move the mouse over the menu, but when it is opened it is behind the div in the body.
Fiddle to better understand:
Add z-index:999; to class menu as well.
.menu
{
...
z-index:999;
}
Edit : to document for posterity:
The z-index equals the position in the Z coordinate; the Z axis is taken as the one that "leaves" the screen and grows toward the user's face. That is, the higher the Z index, the closer to the user the element goes , overlapping those with the lowest 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 fine (there was no complaint regarding the initial layout of the components, only in relation to the menu items) .
However, as @FelipeStoker pointed out, you can do a study of the coordinates in order to organize 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 plane XY (A will never overlap with B), the same value of z-index can be applied to both, without prejudice.
You do not need to use z-index:999 at all. You need to analyze the structure and apply z-index incrementally:
For example:
You can put .menu z-index:2 , because separator has z-index:1 , and are different divs.
That is, the correct one is to put:
.menu
{
position: fixed;
border: 1px solid #ddd;
width: 47px;
float:left;
background:#ccc;
z-index: 2;
}