How to create: sticky images
- Previous Page Team Introduction
- Next Page Flip Image
Learn how to create sticky images using CSS.
Sticky image
Note:This example does not apply to Internet Explorer or Edge 15 and earlier versions.
Sticky image
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Set position: sticky; elements will be positioned according to the user's scroll position.
Sticky elements will switch between relative positioning and fixed positioning depending on the scroll position. Before reaching the given offset position in the viewport, it will be in relative positioning - 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 examples). To make sticky positioning work, you must also specify at least top,right,bottom or left of one.
Related Pages
Tutorial:CSS Image
Tutorial:CSS Positioning
- Previous Page Team Introduction
- Next Page Flip Image
