Como criar: Elementos adesivos

Aprenda a usar CSS para criar elementos adesivos.

Experimente pessoalmente

Atenção:Este exemplo não se aplica ao Internet Explorer ou ao Edge 15 e versões anteriores.

Elementos adesivos

Exemplo

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

Experimente pessoalmente

Elementos com position: sticky; são alinhados com base na posição de rolagem do usuário.

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 janela de exibição, ele se alinha relativamente, e então ele 'cola' no local (como position:fixed).

Atenção:Internet Explorer, Edge 15 e versões anteriores não suportam alinhamento adesivo. Safari requer o préfixo -webkit- (veja os exemplos abaixo). Para que o alinhamento adesivo funcione, é necessário especificar pelo menos um dos seguintes: top, right, bottom ou left.

Páginas relacionadas

Tutorial:Posicionamento CSS