Absolute positioning - position | sticky css
Stickypositioningcanbethoughtofasahybridofrelativeandfixedpositioningwhenitsnearestscrollingancestoristheviewport.Astickilypositionedelementistreatedasrelativelypositioneduntilitcrossesaspecifiedthreshold,atwhichpointitistreatedasfixeduntilitreachestheboundaryofitsparent.Forexample:#one{position:sticky;top:10px;}TheaboveCSSrulewouldpositiontheelementwithidonerelativelyuntiltheviewportwasscrolledsuchthattheelementwouldbelessthan10pixelsfromthetop.Beyondthatthreshold,theelementwouldbefixedto10...
Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example:
#one { position: sticky; top: 10px; }The above CSS rule would position the element with id one relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.
A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen,...