Lesson 10: CSS Positioning - Placing Elements Precisely

What You'll Learn

The five position types (static, relative, absolute, fixed, sticky)
How to use top, right, bottom, left properties
Z-index and stacking context
Common positioning patterns
When to use each position type

Why This Matters

Positioning gives you precise control over element placement. It's essential for creating overlays, tooltips, fixed headers, and complex layouts that can't be achieved with normal document flow.

Part 1: Understanding Position Types

Position: Static (Default)

div {
    position: static;  / Default - normal document flow /
}

Characteristics:

Normal document flow
Top, right, bottom, left don't work
This is the default behavior

Position: Relative

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Characteristics:

Element positioned relative to its normal position
Original space in document flow is preserved
Other elements not affected

Example:

<div class="box">I'm moved 20px down and 30px right</div>

The box moves, but its original spot is still "occupied."

Part 2: Absolute Positioning

Position: Absolute

.overlay {
    position: absolute;
    top: 0;
    right: 0;
}

Characteristics:

Removed from normal document flow
Positioned relative to nearest positioned ancestor
If no positioned ancestor, uses <body>

Example:

<div class="container" style="position: relative;">
    <div class="overlay">I'm positioned absolute</div>
</div>

.container {
    position: relative;  / Creates positioning context /
    width: 400px;
    height: 300px;
    border: 2px solid black;
}

.overlay {
    position: absolute;
    top: 10px;     / 10px from container's top /
    right: 10px;   / 10px from container's right /
    background-color: red;
    padding: 10px;
}

Part 3: Fixed Positioning

Position: Fixed

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

Characteristics:

Removed from document flow
Positioned relative to viewport (browser window)
Stays in place when scrolling

Common uses:

Fixed headers
Fixed navigation bars
Floating action buttons
Cookie notices

Example - Fixed Header:

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: white;
    padding: 20px;
    z-index: 1000;
}

body {
    padding-top: 80px;  / Prevent content from hiding under header /
}

Part 4: Sticky Positioning

Position: Sticky

.sidebar {
    position: sticky;
    top: 20px;
}

Characteristics:

Hybrid of relative and fixed
Acts relative until scroll reaches threshold
Then becomes fixed
Great for headers and sidebars

Example - Sticky Navigation:

nav {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 1px solid #ddd;
    z-index: 100;
}

Stays at top when scrolling past it!

Part 5: Positioning Properties

Top, Right, Bottom, Left

.positioned {
    position: absolute;
    top: 10px;      / Distance from top /
    right: 20px;    / Distance from right /
    bottom: 30px;   / Distance from bottom /
    left: 40px;     / Distance from left /
}

Values:

Pixels: 10px
Percentages: 50%
Auto: auto
Negative: -10px

Centering with Absolute Position

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    / Centers element perfectly /
}

Or with known dimensions:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;   / Half of height /
    margin-left: -100px;  / Half of width /
}

Part 6: Z-Index (Stacking Order)

Understanding Z-Index

.bottom {
    position: relative;
    z-index: 1;
}

.middle {
    position: relative;
    z-index: 2;
}

.top {
    position: relative;
    z-index: 3;
}

Rules:

Higher z-index = on top
Only works on positioned elements (not static)
Default z-index is auto (same as 0)

Example - Overlapping Elements:

.image {
    position: relative;
    z-index: 1;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    z-index: 2;  / Appears above image /
}

Part 7: Common Positioning Patterns

Pattern 1: Modal/Overlay

<div class="modal-overlay">
    <div class="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content here...</p>
        <button>Close</button>
    </div>
</div>

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    z-index: 1001;
}

Pattern 2: Card with Badge

<div class="card">
    <div class="badge">New</div>
    <h3>Product Title</h3>
    <p>Product description...</p>
</div>

.card {
    position: relative;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

Pattern 3: Tooltip

<button class="tooltip-trigger">
    Hover me
    <span class="tooltip">This is a tooltip!</span>
</button>

.tooltip-trigger {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.tooltip-trigger:hover .tooltip {
    opacity: 1;
}

/ Arrow /
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

Pattern 4: Fixed Action Button

.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.fab:hover {
    background-color: #0056b3;
}

Part 8: Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Positioning Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Fixed Header -->
    <header class="fixed-header">
        <h1>My Website</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main>
        <section id="home">
            <h2>Welcome</h2>
            
            <!-- Card with Badge -->
            <div class="card featured">
                <span class="badge">Featured</span>
                <h3>Special Offer</h3>
                <p>Check out our latest products!</p>
            </div>
            
            <!-- More cards -->
            <div class="card">
                <h3>Regular Card</h3>
                <p>Standard content here.</p>
            </div>
        </section>
        
        <section id="about" style="height: 800px;">
            <h2>About Us</h2>
            <p>Some content...</p>
        </section>
        
        <section id="contact" style="height: 800px;">
            <h2>Contact</h2>
            <p>Get in touch...</p>
        </section>
    </main>
    
    <!-- Floating Action Button -->
    <button class="fab" title="Scroll to top">↑</button>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 80px;  / Space for fixed header /
    line-height: 1.6;
}

/ Fixed Header /
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fixed-header h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.fixed-header nav a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

.fixed-header nav a:hover {
    text-decoration: underline;
}

/ Main Content /
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

section {
    margin-bottom: 60px;
}

h2 {
    margin-bottom: 30px;
    color: #2c3e50;
}

/ Card /
.card {
    position: relative;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card.featured {
    border-color: #3498db;
    border-width: 2px;
}

/ Badge /
.badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: #e74c3c;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/ Floating Action Button /
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    transition: all 0.3s;
}

.fab:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

Practice Exercises

Exercise 1: Fixed Navigation

Create a page with:

Fixed header that stays at top when scrolling
Enough content to scroll
Smooth scroll behavior
Active link highlighting

Exercise 2: Image Gallery with Overlays

Create an image gallery where:

Each image has an overlay with title
Overlay positioned absolutely over image
Hover effect reveals full overlay
Proper z-index management

Exercise 3: Modal Dialog

Create a modal that:

Opens over page content
Has semi-transparent backdrop
Centered content box
Close button in top-right corner
Uses fixed positioning

Common Mistakes

Mistake 1: Forgetting Parent Position

.child {
    position: absolute;
    top: 0;
    / ❌ No positioned parent - uses body! /
}

Fix:

.parent {
    position: relative;  / ✅ Creates positioning context /
}

.child {
    position: absolute;
    top: 0;  / Now relative to .parent /
}

Mistake 2: Z-index on Static Elements

div {
    / position: static; (default) /
    z-index: 100;  / ❌ Won't work! /
}

Fix:

div {
    position: relative;  / ✅ or absolute, fixed, sticky /
    z-index: 100;
}

Mistake 3: Fixed Elements Without Width

.header {
    position: fixed;
    top: 0;
    / ❌ No width - might not span full width /
}

Fix:

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;  / ✅ or width: 100% /
}

What You Learned

✅ Five position types (static, relative, absolute, fixed, sticky)
✅ How to use positioning properties (top, right, bottom, left)
✅ Z-index and stacking context
✅ Common positioning patterns
✅ When to use each position type
✅ How to create overlays, tooltips, and fixed elements

What's Next?

Now you're ready for Flexbox - the modern way to create flexible, responsive layouts! This is where layout really gets powerful!