Skip to main content
2 de 5
adicionou 411 caracteres ao conteúdo
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Está correto o comportamento do conteúdo, de acordo com seu CSS ele deve vir por cima do menu.

Por padrão o z-index dos elementos é zero, e a ordem de renderização quando os valores "empatam" é desenhar primeiro o pai, e sobre este, o elemento filho.

Quando você quer mover um elemento para cima (mais "perto do usuário") de outro, deve usar um z-index maior que o elemento que vai ficar oculto/encoberto.


O problema:

Acontece que no seu CSS o conteúdo tem z-index:3:

#conteudo{
   position:absolute;
   text-align:justify;
   width:100%;
   z-index:3;        /* <------- */
   margin-top:3em;
   margin-left:3em;
   margin-right:1em;

... e o menu z-index:1 :

#menu{
   position:fixed;
   z-index:1;        /* <------- */
   width:100%;
}

...portanto o menu deve ficar atrás do conteúdo.


A solução:

Se deseja o #menu encobrindo o #conteudo, precisa que este o primeiro tenha um z-index maior que o último.

Ou seja:

#menu{
   position:fixed;
   z-index:4;        /* <------- maior que o 3 do #menu */
   width:100%;
}

Poderia eventualmente deixar o conteúdo sem z-index, mas aí pode começar a bagunçar outras partes do projeto.

Largato
  • 92,9mil
  • 18
  • 190
  • 261