Perfect—now we’re entering real layout control in CSS. Positioning is what allows you to place elements exactly where you want.

📍 CSS COURSE – MODULE 7: POSITIONING

📁 File: position.md

📍 CSS Positioning

📌 Introduction

The position property controls how an element is placed on the page.

👉 It allows you to:

• move elements anywhere
• overlap elements
• fix elements on screen
• create modern UI layouts

🧠 1. Static (Default)

div {
  position: static;
}

📌 Behavior:

• Default position
• Follows normal document flow

✔ You usually don’t use it manually

🔄 2. Relative Position

div {
  position: relative;
  top: 10px;
  left: 20px;
}

📌 Behavior:

• Moves element from its original position
• Keeps original space reserved

📦 3. Absolute Position

div {
  position: absolute;
  top: 0;
  left: 0;
}

📌 Behavior:

• Removed from normal flow
• Positioned relative to nearest parent

🧱 Important Rule

👉 Absolute works relative to a parent with:

position: relative;

📌 4. Fixed Position

div {
  position: fixed;
  top: 0;
}

📌 Behavior:

• Stays fixed on screen
• Does NOT move when scrolling

✔ Used for:

• navbar
• floating buttons

📌 5. Sticky Position

div {
  position: sticky;
  top: 0;
}

📌 Behavior:

• Acts like relative first
• Becomes fixed when scrolling

✔ Used for sticky headers

🧠 Position Summary

🧩 Real Example

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  position: relative;
  height: 200px;
  background: lightgray;
}

.box {
  position: absolute;
  top: 20px;
  left: 20px;
  background: red;
  color: white;
  padding: 10px;
}

📌 Fixed Navbar Example

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: black;
  color: white;
}

⚠️ Common Mistakes

• Using absolute without parent ❌
• Confusing relative vs absolute ❌
• Overusing fixed elements ❌
• Breaking layout flow ❌

🎯 Pro Tip

👉 Modern layouts prefer:

• Flexbox (for structure)
• Grid (for layout)
• Position (only for special cases)

🧪 Mini Exercise

Create:

1. A parent container
2. A box inside it using absolute positioning
3. A fixed navbar at top
4. A sticky header that stays on scroll