Position is used to make the element settle at a place in the page layout.
Absolute, fixed and sticky are values to CSS position property.
Absolute: Element with position absolute is removed from the document. And no space is created for absolute element. It set in the page based on its nearest positioned ancestor. Otherwise, it is placed relative with its initial containing block. Final positions of the absolute element are set using top, left, right and bottom values.
Ex: place an element in element at a particular height, close icons modals.
Fixed: Fixed elements is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block(body/document). final position of fixed element will be also set using the top, left,right and bottom values.
Ex: chat icons, headers, bottom, navbars.
Sticky: Element with sticky value is positioned according to the normal flow in the document. and then offsets relative to its nearest scrolling ancestor and containing block. Even though the element is in the document its offset position does not effect the nearest elements. A sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism". even if that ancestor isn't the nearest actually scrolling ancestor.
Sticky element works can be visualised only when the immediate ancestor has scrolling.
Ex: Scrollable headers, side headings, tab bars headers.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Top comments (0)