CSS The position Property
⭐ CSS position Property
The position property decides how an element is placed on a page.
It works together with:top, right, bottom, left
1. position: static; (Default)
-
Normal document flow
-
Cannot use top/left, etc.
2. position: relative;
-
Stays in normal flow
-
Moves relative to itself
3. position: absolute;
-
Removed from normal flow
-
Positioned relative to the nearest positioned ancestor
-
If no ancestor → relative to
<body>
4. position: fixed;
-
Stays fixed on the screen
-
Does not move when scrolling
-
Usually used for navbars or back-to-top buttons
5. position: sticky;
-
Behaves like relative
-
Sticks to the top when scrolling
-
Useful for sticky headers
📌 Example (All Types)
⭐ Summary Table
| Position | Moves With Page? | In Flow? | Uses top/left? | Common Use |
|---|---|---|---|---|
| static | ✔ Yes | ✔ Yes | ❌ No | Default |
| relative | ✔ Yes | ✔ Yes | ✔ Yes | Small adjustments |
| absolute | ❌ No | ❌ No | ✔ Yes | Popups, tooltips |
| fixed | ❌ No | ❌ No | ✔ Yes | Sticky buttons, nav |
| sticky | ✔ Until sticky | ✔ Yes | ✔ Yes | Sticky headers |
