CSS Positions Sticky - a new CSS3 Position make life easy

Making sticky elements was not that straightforward in old days you may have heard sticky headers footers and even sticky.js like javascript files to do the job to create sticky elements in your web pages.

In older CSS versions there were three values for position: relative | absolute | fixed .  We can change the offsets of these values by giving bottom or top and left or right.

Relative - Current position of the page -  can change it with top left right values without inheriting the other elements in the page

Absolute - Absolute is used to position an element within its parent element. (if the parent element have a  position)

Fixed - similar to absolute but it positioned relative to the web browser window instead of the parent div or element even when you scroll

The new value Position : Sticky is a combination of RELATIVE and FIXED

This will be relatively positions untill it reached a value of offset while scrolling the page.
Then it will become fixed.

.sticky{
top:200px;
position:sticky;
}

This feature will not suport in any version of IE or Opera Mini broswers