CSS position Property Explained with real time examples

The position property controls how an element is placed in the document and how it behaves when you scroll, resize, or align layouts.

Types of Position in CSS

1. Static (Default)

2. Relative

3. Absolute

4. Fixed

5. Sticky

1. Static (Default) Behavior

1. Default position for all elements
2. Top Left Right Bottom do not work
3. Follows normal HTML flow

2. Relative Behavior

1. Moves relative to its original position
2. Original spaces is still reserved

3. Absolute Behavior

1. Removed from normal flow
2. Positioned relative to nearest positioned parent
3. If no parent → relative to body

4. Fixed Behavior

1. Positioned relative to viewport
2. Stays fixed while scrolling

5. Sticky Behavior

1. Acts like relative initially
2. Becomes fixed after scroll reaches a point