Shobha
The best way to predict the future is to invent it
What is the difference between relative, absolute, fixed, and sticky positioning?
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.
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.