CSS menu bugado onde fica atras de textos

[vitizin]

meu menu esta com esse bug e está ficando atrás dos textos, o menu esta em position absolute e os textos em relative, ja coloquei o menu relative e não funcionou, quem puder me ajudar ficarei grato, segue o codigo...

 

.menu-mobile {
        position: absolute;
        left: 0;
        right: 0;
        margin-right: auto;
        width: 600px;
        height: 100%;
        background-color: white;
        box-shadow: 2px 2px 2px rgba(107, 105, 105, 0.151);
    }
    
    .opções-menu-mobile {
        display: block;
        position: relative;
        left: 0;
        right: 0;
        top: 50px;
        text-align: center;
        font-family: arial;
        font-size: 50px;
        color: RGB(27, 27, 27);
        list-style: none;
        margin-bottom: 20px;
    }

    .tag {
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 30px;
        width: 950px;
        padding: 10px;
        background-color: transparent;
        text-align: left;
        font-family: arial;
        font-size: 20px;
    }
    
    .titulo {
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 10px;
        width: 950px;
        padding: 10px;
        background-color: transparent;
        text-align: left;
        font-family: arial;
        font-size: 40px;
        color: RGB(27, 27, 27);
    }
    
    .autor {
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 10px;
        width: 950px;
        padding: 10px;
        background-color: transparent;
        text-align: left;
        font-family: arial;
        font-size: 20px;
        color: grey;
    }
    
    .post {
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 10px;
        width: 950px;
        padding: 10px;
        background-color: transparent;
        text-align: left;
        font-family: arial;
        font-size: 30px;
        color: RGB(20,20,20);
    }

 

[GabrielSennaMs]

@vitxr Bom você pode usar a propriedade "z-index" do css para fazer esse ajuste de posição do seu menu.

 

Aqui um tutorial de como usar: https://www.w3schools.com/css/css_z-index.asp

[vitizin]

54 minutos atrás, GabrielSennaMs disse:

@vitxr Bom você pode usar a propriedade "z-index" do css para fazer esse ajuste de posição do seu menu.

 

Aqui um tutorial de como usar: https://www.w3schools.com/css/css_z-index.asp

deu certo n

[Adriano_web]

@vitxr tente overflow: hidden no menu

[GabrielSennaMs]

@vitxr Manda o HTML do seu menu

[vitizin]

21 minutos atrás, Adriano_web disse:

@vitxr tente overflow: hidden no menu

mesma coisa

11 minutos atrás, GabrielSennaMs disse:

@vitxr Manda o HTML do seu menu

<svg class="icon-menu-mobile" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13 16.745c0-.414-.336-.75-.75-.75h-9.5c-.414 0-.75.336-.75.75s.336.75.75.75h9.5c.414 0 .75-.336.75-.75zm9-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm-4-5c0-.414-.336-.75-.75-.75h-14.5c-.414 0-.75.336-.75.75s.336.75.75.75h14.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero"/></svg>

    <div class="menu-mobile">
      <ul>
        <a href="#"><strong><li class="opções-menu-mobile">Home</li></strong></a>
        <a href="#"><li class="opções-menu-mobile">Ultimos Posts</li></a>
        <a href="#"><li class="opções-menu-mobile">Contato</li></a>
        <a href="#"><li class="opções-menu-mobile">Sobre</li></a>
      </ul>
    </div>

 

[GabrielSennaMs]

@vitxr Só com isso não tem como ver o erro, manda a sua página todo ae.

[Adriano_web]

@vitxr

6 minutos atrás, vitxr disse:

mesma coisa

<div class="menu-mobile">
  <ul>
    <a href="#"><strong><li class="opções-menu-mobile">Home</li></strong></a>
    <a href="#"><li class="opções-menu-mobile">Ultimos Posts</li></a>
    <a href="#"><li class="opções-menu-mobile">Contato</li></a>
    <a href="#"><li class="opções-menu-mobile">Sobre</li></a>
  </ul>
</div>

 

 

Não ah nada de errado com seu código HTML. Como você está lindando com as consultas de mídia? Mostre-me o teu media queries para eu dar uma conferida. 

[vitizin]

7 horas atrás, Adriano_web disse:

@vitxr

 

Não ah nada de errado com seu código HTML. Como você está lindando com as consultas de mídia? Mostre-me o teu media queries para eu dar uma conferida. 

o media queries é o css que esta no topo do post mesmo, na parte desktop está com display: none no menu e opções segue o mesmo codigo