<html> <head> <style> /* Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Have no fear if you don't understand what this means, the example will help you to understand it better. */ .main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; } </style> </head> <body> <div class="parent-element"> <div class="sibling-element"> I'm the other sibling element. </div> <div class="main-element"> All eyes on me. I am the main element. </div> <div class="sibling-element"> I'm the other sibling element. </div> </div> </body> <html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter