1

Estou tentando criar um menu que não se mova independente da rolagem do usuário na página usando position fixed.

Porém estou tendo um problema com a transparência, sempre que o menu encontra com outro conteúdo, ele fica transparente.

Antes eu usava um menu com position absolute, e o menu nem aparentava ter transparência. Pesquisei no google tentei algumas coisas mas não consegui resolver, cheguei a colocar opacity: 100% mas também não resolveu.

Segue o código css do meu menu, e imagens demonstrando o que ocorre. Alguém sabe como resolver esse problema?

div#menu
{
    width: 100%;
    background-color: rgba(60,60,65,1);
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    position: fixed;
    top: 0px;
    left: 0px;
}
div#menu ul
{
    text-align: left;
}
div#menu li
{
    display: inline-block;
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
}
div#menu a
{
    font-family: Arial, sans-serif;
    font-size: 16pt;
    text-decoration: none;
    color: white;
}
div#menu a:hover
{
    color: rgba(50,50,255,1);
    text-decoration: underline;
}

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

1 Resposta 1

1

Você só precisa definir o z-index nesse caso (quando menor mais acima) link w3schools

1
  • Coloquei z-index: 1; e funcionou mesmo, eu ainda não conhecia o z-index, muito obrigado pela ajuda.
    – Danilo
    Commented 2/07/2018 às 15:33

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 .