1️⃣ What is CSS Positioning?

CSS positioning controls where an element appears on the page and how it behaves when the page scrolls or overlaps other elements.

By default, HTML elements follow normal document flow (top to bottom).

Positioning allows you to:

• Move elements freely
• Create overlays (modals, dropdowns)
• Stick headers/sidebars
• Layer elements using z-index

2️⃣ The position Property (Core Concept)

position: static | relative | absolute | fixed | sticky;

Each value changes how top, right, bottom, left work.

3️⃣ position: static (Default)

Key Points

• Default position of every element
• Follows normal document flow
• top, left, right, bottom ❌ do NOT work

div {
position: static;
}

✅ Use case:

When you don’t want positioning behavior (most elements).

❌ Common mistake: