Cómo - Imagen fija
Aprende a crear una imagen adhesiva con CSS.
Imagen pegajosa
Nota: este ejemplo no funciona en Internet Explorer o Edge 15 y versiones anteriores.
Imagen pegajosa
Ejemplo
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Un elemento con position: sticky;
se posiciona en función de la posición de desplazamiento del usuario.
Un elemento fijo alterna entre relative
y fixed
, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como posición: fija).
Nota: Internet Explorer, Edge 15 y versiones anteriores no admiten el posicionamiento fijo. Safari requiere un prefijo -webkit- (ver ejemplo a continuación). También debe especificar al menos uno de , top
o para que funcione el posicionamiento fijo.right
bottom
left
Para obtener más información sobre la colocación de CSS, lea nuestro tutorial Posición de CSS .
Para obtener más información sobre cómo diseñar imágenes, lea nuestro tutorial de imágenes CSS .