How to create: sticky images

Learn how to use CSS to create sticky images.

Sticky image

Note:This example does not apply to Internet Explorer or Edge 15 and earlier versions.

Try it yourself

Sticky image

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

Try it yourself

set position: sticky; elements will be positioned according to the user's scroll position.

Sticky elements switch between relative positioning and fixed positioning depending on the scroll position. Before reaching the given offset position in the viewport, it will be positioned relatively - then it will 'stick' in place (like position:fixed)

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- Prefix (see example). To make sticky positioning work, you must also specify at least top,right,bottom of left 中的一个。

Related pages

Tutorial:CSS image

Tutorial:CSS positioning