Position sticky não fica fixo!

Oi boa noite então eu coloquei o positon sticky no meu site e ele não fica fixo na pagina quando eu rolo a mesma!



index.html (1,5,KB)
normalize.css (6,8,KB)
style.css (3,8,KB)

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>Site Teste</title>
</head>

<body>
    <header>
        <h1 class="logo">
            <img class="foto-logo " src="comercio-eletronico.png" alt=""> Loja Virtual
        </h1>
        <nav>
            <a href="">Sobre</a>
            <a href="">Contato</a>
        </nav>

    </header>
    <main>
        <img class="foto-computador" src="computador.jpg" alt="">
        <h2>
            Sobre
        </h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora sapiente necessitatibus natus rerum, distinctio minus error placeat nisi at pariatur animi voluptatibus nobis eum, asperiores repudiandae quasi! Dicta, exercitationem porro.</p>


    </main>
    <footer>
        <h3>
            Contatos
        </h3>
        <form action="">
            <div class="box-form">
                <label for="">Nome</label>
                <input type="text" name="" id="">
                <label for="">Telefone</label>
                <input type="tel" name="" id="">
                <label for="">Email</label>
                <input type="email" name="" id="">
                <button>Enviar</button>
            </div>
        </form>
    </footer>
</body>

</html>
                                                   header {
                                                       background-color: #9eadab;
                                                       position: sticky;
                                                       align-items: center;
                                                       display: flex;
                                                       justify-content: space-between;
                                                       border-bottom: 1px solid black;
                                                   }
                                                   
                                                   a {
                                                       text-decoration: none;
                                                       color: black;
                                                       margin-left: 0%;
                                                       margin-right: 1em;
                                                       margin-bottom: 39%;
                                                       font-size: 33px;
                                                   }
                                                   
                                                   a:hover {
                                                       color: #657c79;
                                                   }
                                                   
                                                   .foto-logo {
                                                       width: 24%;
                                                       margin-left: 11%;
                                                       margin-top: 0%;
                                                       margin-bottom: 0%;
                                                   }
                                                   
                                                   h2 {
                                                       margin-bottom: 5%;
                                                       margin-top: 4%;
                                                       margin-left: 7%;
                                                       font-size: 329%;
                                                   }
                                                   
                                                   .foto-computador {
                                                       width: 100%;
                                                       margin-top: 0%;
                                                       margin-bottom: 0%;
                                                   }
                                                   
                                                   p {
                                                       text-align: center;
                                                       margin-top: 4%;
                                                       margin-bottom: 12%;
                                                   }
                                                   
                                                   h3 {
                                                       margin-left: 30%;
                                                   }
                                                   
                                                   .box-form {
                                                       display: grid;
                                                   }
                                                   
                                                   label {
                                                       text-align: center;
                                                   }

Segundo a página abaixo, vc precisa especificar um top , right , bottom ou left para o sticky funcionar como esperado.

https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#sticky_positioning

Eu adicionei um top:0 e funcionou. Ficou assim:

header {
  top: 0;
  background-color: #9eadab;
  position: sticky;
  align-items: center;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid black;
}

Deu certo obrigado!

1 curtida