What is the difference between absolute, relative, fixed, and sticky positioning in CSS?

Question

Ashutosh Kumar Verma · Answer

Relative positioningand 
With position: relative;, the element is positioned relative to its normal position in the document flow. This allows you to offset the element from its original position without affecting other elements. However, the space it originally occupied is still preserved.
and 
Absolute positioningand 
position: absolute; removes the element from the document flow, which means it no longer affects the layout of other elements. It is positioned relative to its closest positioned ancestor (an element with a
position other than static). If there is no positioned ancestor, it will be positioned relative to the
andlt;html> element.
and 
Fixed positioning
position: fixed; also removes the element from the document flow, but unlike absolute positioning, it is always positioned relative to the viewport (browser window). It remains fixed in its place even when the page is scrolled.
and 
Sticky positioningand 
position: sticky; lets the element behave like relative until the user scrolls to a certain point, after which it behaves like
fixed. When the element reaches a determined scroll position (set using
top, right, bottom, or left) it "sticks" in its place.

interview

What is the difference between absolute, relative, fixed, and sticky positioning in CSS?

Ashutosh Kumar Verma

1 Answers

Liked By