CSS Display & Positioning Explained

Awesome! Let’s move ahead with Lesson 7 – one of the most important lessons in frontend development for layout and positioning:

📘 LESSON 7: CSS Display & Positioning Explained

✅ Learning Goals:

Understand how elements are displayed (block, inline, inline-block, none)
Learn how to position elements using static, relative, absolute, and fixed
Combine display and position for real layouts
Build a simple layout with floating and positioned elements

🧾 Lesson Content (Text for Website)

🧱 Part 1: Display Property

The display property controls how an element behaves in the layout.

Common Display Types:

Display Type	Behavior
`block`	Takes full width (e.g., `<div>`, `<p>`)
`inline`	Fits content only, doesn’t break line (e.g., `<span>`, `<a>`)
`inline-block`	Like inline, but you can set width/height
`none`	Hides the element completely

🧪 Example:

<style>
  .block {
    display: block;
    background: lightblue;
    margin-bottom: 10px;
  }

  .inline {
    display: inline;
    background: lightgreen;
    padding: 5px;
  }

  .inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: pink;
    margin: 5px;
  }
</style>

<div class="block">Block Element</div>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>

📦 Part 2: Position Property

The position property controls where an element appears on the page.

Value	Description
`static` (default)	Normal flow (no positioning)
`relative`	Moves element relative to itself
`absolute`	Positioned relative to nearest positioned parent
`fixed`	Stays fixed on screen (e.g., navbar)
`sticky`	Sticks to the top when scrolled into view

📌 Example: Relative and Absolute

<style>
  .parent {
    position: relative;
    background: #eee;
    width: 300px;
    height: 200px;
  }

  .child {
    position: absolute;
    top: 10px;
    right: 10px;
    background: tomato;
    padding: 10px;
    color: white;
  }
</style>

<div class="parent">
  Parent Box
  <div class="child">I'm absolutely positioned</div>
</div>

The .child is positioned relative to the .parent (because .parent is relative).

📌 Example: Fixed Navbar

<style>
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: #333;
    color: white;
    padding: 15px;
  }

  .content {
    margin-top: 70px;
  }
</style>

<div class="navbar">I stay on top!</div>
<div class="content">
  <p>Page content here...</p>
</div>