Como fazer - Imagem Fixa
Aprenda como criar uma imagem adesiva com CSS.
Imagem Fixa
Observação: este exemplo não funciona no Internet Explorer ou Edge 15 e em versões anteriores.
Imagem Fixa
Exemplo
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Um elemento com position: sticky;
é posicionado com base na posição de rolagem do usuário.
Um elemento adesivo alterna entre relative
e fixed
, dependendo da posição de rolagem. Ele é posicionado em relação até que uma determinada posição de deslocamento seja encontrada na viewport - então ele "gruda" no lugar (como position:fixed).
Nota: Internet Explorer, Edge 15 e versões anteriores não suportam posicionamento fixo. O Safari requer um prefixo -webkit- (veja o exemplo abaixo). Você também deve especificar pelo menos um de , top
ou para que o posicionamento fixo funcione.right
bottom
left
Para saber mais sobre posicionamento CSS, leia nosso tutorial Posição CSS .
Para saber mais sobre como estilizar imagens, leia nosso tutorial de Imagens CSS .