Como criar: imagem adesiva

Aprenda a usar CSS para criar imagens adesivas.

imagem adesiva

img.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Experimente pessoalmente

configurado position: sticky; os elementos serão alinhados com base na posição de rolagem do usuário.

Os elementos adesivos alternam entre alinhamento relativo e fixo, dependendo da posição de rolagem. Antes de alcançar a posição de deslocamento especificada na vista, ele será alinhado relativamente - então ele "adere" no local (como position:fixed)

Atenção:O Internet Explorer, Edge 15 e versões anteriores não suportam alinhamento adesivo. O Safari precisa de um -webkit- Prefixo (veja exemplo). Para que o alinhamento adesivo funcione, ainda é necessário especificar pelo menos superior、direita、inferior ou esquerda um dos quais.

Páginas relacionadas

Tutorial:Imagem CSS

Tutorial:Alinhamento CSS