Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Sombras do main passando por cima do header

Olá, bom dia pessoal, espero que estejam todos bem!

Então, quando coloco uma box-shadow no meu main, ela fica por cima do header:

Printscreen da página principal do site

Assim está meu index.html

<body>
<header>
    <div class="container_cabecalho">
        <div class="logo_cabecalho">
            <img src="img/logo.png" alt="">
        </div>
        <nav>
            <a href="index.html">Home</a>
            <a href="produtos.html">Produtos</a>
            <a href="contato.html">Contatos</a>
        </nav>
    </div>
</header> 

<main>    [...]

Assim está meu CSS:

header { background-image: linear-gradient(to bottom, rgb(105, 105, 105), transparent); height: fit-content; box-shadow: 0 0 8px rgba(0, 0, 0, 0.495); }

main {

background-color: white;
max-width: 800px;
margin: 0 auto 80px auto;
padding: 30px 0;
height: fit-content; /* Importante */
box-shadow: 
    0 0 8px rgba(0, 0, 0, 0.47);

}

Alguém poderia me ajudar?

3 respostas

Oi Thiago, tudo bem?

O código do seu index.html não veio completo e aí não conseguimos testá-lo pra ver o que pode estar errado. Poderia colar todo?

Obrigada e bons estudos!

solução!

Olá, tudo bem e com vc?

Eu consegui, eu tava colocando pos relative no main e no head, ai o z-index acabava não funcionando. Agora consegui trazer o head pra cima com um pos relative+z-index, obrigado de qualquer forma!

Que ótimo que conseguiu resolver Thiago! :D