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!
<div class="lightbox-wrapper"><a class="lightbox" href="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp" data-download-href="/uploads/default/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682" title="comercio-eletronico"><img src="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp" alt="comercio-eletronico" data-base62-sha1="lOpRnYILd6xfjdNCNeCxjPgV4yu" width="500" height="500" srcset="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp, /uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp 1.5x, /uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp 2x" data-small-upload="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg>comercio-eletronico512×512 40.1 KB<svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
</div></a></div>
<div class="lightbox-wrapper"><a class="lightbox" href="/uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.jpeg.webp" data-download-href="/uploads/default/5452b05b6c2ed0a7c2124d35ce652a70d1485596" title="computador"><img src="/uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.jpeg.webp" alt="computador" data-base62-sha1="c1XgASruEz3IGh1dww8dq4mgEPY" width="690" height="460" srcset="/uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.jpeg.webp, /uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.jpeg.webp 1.5x, /uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.jpeg.webp 2x" data-small-upload="/uploads/3X/5/4/5452b05b6c2ed0a7c2124d35ce652a70d1485596.png.webp"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg>computador1500×1000 215 KB<svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
</div></a></div>
<a class="attachment" href="/uploads/short-url/7nL6bhRtE2L76uJVYkeHra1877Q.html">index.html</a> (1,5,KB)
<a class="attachment" href="/uploads/short-url/7TUxmykJZMoJnyMB5cswEv3uhR8.css">normalize.css</a> (6,8,KB)
<a class="attachment" href="/uploads/short-url/7gYLOaa9HjPD2GBoEj3z6k3v0Tx.css">style.css</a> (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;
}