1

Tenho o seguinte código:

.div1{
    position: absolute;
    z-index:2;
}
.div2{
    position: absolute;
    z-index:1
}

A .div2 possui uma imagem que fica em cima da .div1, alguns pixels apenas.

O que acontece é que na .div1 eu tenho um menu dropdown que está como padrão display:none, quando eu passo o mouse nele, ele fica display:block e z-index:3, só que esse z-index não fica acima da .div2 pois ele está dentro da .div1 que tem z-index menor, tem alguma solução para isso?

3
  • 1
    Ainda a pouco tempo tive esse problema, o que eu fiz foi deslocar o dropdown para fora da div, mas coloca-lo no mesmo sitio.
    – Jorge B.
    Commented 17/06/2014 às 12:45
  • Verdade cara, fiz aqui e funcionou. Pena que perdi as referências de position:relative que tinha usado para centralizar 100% sem usar margin Commented 17/06/2014 às 12:53
  • Estava com o mesmo problema resolvi colocando o aributo position:fixed; na div. Commented 12/08/2017 às 0:10

2 Respostas 2

4

z-index é um formigueiro. O melhor é realmente colocar o elemento que vai ficar por cima do lado de fora. Coloque janelas modals e prompts dentro do <body> para evitar conflitos.

Para entender melhor o porquê deste problema, vamos dar uma olhada em como funciona o z-index:

Adaptado do MDN:

  • Atribuir um valor de z-index em um elemento cria um contexto de "empilhamento".
  • Contextos de empilhamento podem estar contidos em outros contexto. Juntos eles criam uma hierarquia de contextos de empilhamento.
  • Cada contexto é completamente independente de seus irmãos: apenas elementos descendentes são considerados quando o empilhamento é processado.
  • Cada contexto de empilhamento é contido em si mesmo: após o conteúdo de um elemento ser empilhado, o elemento inteiro é considerado na ordem do contexto de empilhamento do pai.

Complicou, não é?

Vamos dar uma olhada nesta estrutura:

            z-index
div A       2
 |--div AA  1
 |--div AB  2

div B       1
 |--div BA  3
 |--div BB  4

Neste esquema div A tem z-index 2 e B tem z-index 1. Todas as divs dentro de Div B também terão z-index 1 quando comparadas com a Div A e suas divs filhas.
Os valores 3 e 4 de BA e BB só são válidos entre si, pois estão no mesmo contexto (nível).

Uma forma de "quebrar" a estrutura é atribuir um valor negativo ao z-index de uma div filha, mas note que essa abordagem não funciona no IE 6/7.

1
  • Vou tentar informar um z-index negativo, creio ser a solução. Muito obrigado Commented 18/06/2014 às 11:38
0

Use position:relative na div ou ul que você quer que fique por cima. position:relative por si só já faz com que o elemento "suba" um nível na sua página.

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 .