0

Estou com um seguinte problema, tenho uma div no body com posição absoluta, e tenho um menu em que o mesmo é fixo, tem-se sub-menus e para abri-los deve-se passar o mouse encima do menu,porém quando o mesmo é aberto ele fica atrás da div no body.

Fiddle para entender melhor:

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

Obs: eu sei que removendo o fixed do menu resolve, mas não é possível fazer o mesmo por que deseja-se ter o menu na lateral quando ter mais conteúdo..

1
  • Não sei se eu entendi direito mas veja se removendo o z-index da classe separator é o que procura. Commented 29/08/2014 às 19:46

2 Respostas 2

1

Adicione o z-index:999; à classe menu também.

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

Edit: para documentar para a posteridade:

O z-index equivale à posição na coordenada Z; o eixo Z é tido como aquele que "sai" da tela e cresce em direção ao rosto do usuário. Ou seja: quanto maior o índice Z, mais para "perto" do usuário o elemento vai, sobrepondo-se àqueles com coordenada Z mais baixa.

O valor de 999 foi uma sugestão, tendo em vista que você já utiliza z-index: 1 e z-index: 999 e isto parece funcionar bem (não houve reclamação em relação à disposição inicial dos componentes, apenas em relação aos ítens do menu).

Porém, conforme o @FelipeStoker apontou, você pode fazer um estudo das coordenadas de acordo a organizar a sequência em que os ítens se sobrepõem no eixo Z. Caso, para 2 elementos A e B, não haja competição por espaço no plano XY (A nunca irá se sobrepor a B), um mesmo valor de z-index pode ser aplicado aos dois, sem prejuízo.

1
  • Junte explicação pff...
    – Sergio
    Commented 29/08/2014 às 20:20
0

Não é necessário você usar z-index:999 em tudo. Você precisa analisar a estrutura e aplicar o z-index de forma crescente:

Por exemplo:

Você pode colocar no .menu um z-index:2, pois o separator tem z-index:1, e são divs distintas.

Ou seja, o correto é colocar:

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

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .