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

Subh Prakash Singh
Invent the Future
The main differences between relative, absolute, fixed, and sticky positioning are: 1. Relative: Positions an element relative to its original position. It stays in the document flow but can be shifted using top, right, bottom, or left. 2. Absolute: Positions an element based on its closest ancestor that has a positioning context, such as relative, absolute, or fixed. It is removed from the document flow and does not take up space. 3. Fixed: Positions an element relative to the viewport, staying in the same position even when scrolling, and is removed from the flow. 4. Sticky: Acts like relative until a scroll threshold is reached, after which it behaves like fixed, sticking to the screen while scrolling.