CSS

Lesson 6: CSS Positioning

Duration: 60 minutes | Difficulty: Intermediate | Prerequisites: Lessons 1-5 completed

📋 Learning Objectives

By the end of this lesson, you will be able to:

• Understand the five CSS positioning types
• Use relative positioning for layout adjustments
• Create overlays and modals with absolute positioning
• Build fixed headers and sticky navigation
• Understand z-index and stacking contexts
• Apply positioning techniques in real-world scenarios

🎯 CSS Position Property

The position property specifies how an element is positioned in the document and which properties (top, right, bottom, left) apply to it.

🔧 Position Values

1. Static (Default)

Elements follow normal document flow. Top, right, bottom, left have no effect.

.static {
    position: static; /* Default value */
    /* top, right, bottom, left are ignored */
}

2. Relative

Element is positioned relative to its normal position in the document flow.

.relative {
    position: relative;
    top: 20px;    /* Move 20px down from normal position */
    left: 30px;   /* Move 30px right from normal position */
}

Key Points:

• Maintains original space in document flow
• Other elements aren’t affected
• Creates positioning context for absolute children

3. Absolute

Element is positioned relative to nearest positioned ancestor (or document if none).

.container {
    position: relative; /* Positioning context */
}

.absolute {
    position: absolute;
    top: 0;     /* 0px from top of container */
    right: 0;   /* 0px from right of container */
    width: 200px;
    height: 100px;
}

Key Points:

• Removed from document flow
• Other elements ignore its space
• Positioned relative to nearest positioned ancestor

4. Fixed

Element is positioned relative to viewport (browser window).

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    z-index: 100;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
}

Key Points:

• Always relative to viewport
• Stays in place when scrolling
• Removed from document flow

5. Sticky

Element toggles between relative and fixed based on scroll position.

.sticky-nav {
    position: sticky;
    top: 0; /* Distance from top when "stuck" */
    background: white;
    z-index: 10;
}

.sticky-sidebar {
    position: sticky;
    top: 20px; /* 20px from top when stuck */
    height: fit-content;
}

Key Points:

• Starts as relative positioning
• Becomes fixed when reaching specified offset
• Maintains space in document flow

🔧 Z-Index and Stacking Context

Understanding Z-Index

Controls the stacking order of positioned elements.

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 100;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 101; /* Higher than backdrop */
}

.tooltip {
    position: absolute;
    z-index: 1000; /* Very high for tooltips */
}

Stacking Context Rules

1. Higher z-index appears on top
2. Same z-index: later in HTML appears on top
3. z-index only works on positioned elements
4. Elements with certain properties create new stacking contexts

🛠️ Hands-On Exercises

Exercise 1: Fixed Navigation Header

<header class="site-header">
    <nav class="navbar">
        <div class="nav-brand">Brand</div>
        <ul class="nav-menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main class="main-content">
    <section class="hero">
        <h1>Welcome</h1>
        <!-- More content... -->
    </section>
</main>

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e7eb;
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.main-content {
    padding-top: 80px; /* Account for fixed header height */
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Exercise 2: Modal Dialog

<div class="modal-overlay" id="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Modal Title</h2>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <p>Modal content goes here...</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary">Cancel</button>
            <button class="btn btn-primary">Save</button>
        </div>
    </div>
</div>

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

Exercise 3: Sticky Sidebar

<div class="layout">
    <aside class="sidebar">
        <div class="sidebar-content">
            <h3>Table of Contents</h3>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </div>
    </aside>
    <main class="content">
        <section id="section1">
            <h2>Section 1</h2>
            <!-- Long content... -->
        </section>
    </main>
</div>

.layout {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem;
    padding: 2rem;
}

.sidebar {
    flex: 0 0 250px;
}

.sidebar-content {
    position: sticky;
    top: 2rem;
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.content {
    flex: 1;
    min-width: 0; /* Allows flex item to shrink */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 0.5rem;
}

.sidebar a {
    color: #374151;
    text-decoration: none;
    padding: 0.5rem;
    display: block;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.sidebar a:hover {
    background-color: #e5e7eb;
}

Exercise 4: Tooltip Component

<p>Hover over this <span class="tooltip-trigger">text with tooltip</span> to see the effect.</p>

<div class="tooltip">
    This is a helpful tooltip!
    <div class="tooltip-arrow"></div>
</div>

.tooltip-trigger {
    position: relative;
    color: #2563eb;
    cursor: help;
    border-bottom: 1px dashed #2563eb;
}

.tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.tooltip-trigger:hover + .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

🚨 Common Pitfalls

1. Forgetting positioning context: Absolute elements need a positioned ancestor
2. Z-index wars: Using arbitrarily high z-index values
3. Fixed positioning on mobile: Can be problematic with virtual keyboards
4. Sticky not working: Needs a positioning value (top, bottom, etc.)

🔍 Best Practices

1. Use relative positioning for small adjustments and positioning contexts
2. Keep z-index values organized with a systematic approach
3. Test sticky positioning across different browsers and scenarios
4. Consider accessibility when using positioning for interactive elements
5. Account for scrollbars in fixed positioning calculations

📝 Assessment

Quick Quiz

1. What’s the difference between absolute and fixed positioning?
2. When would you use sticky positioning over fixed?
3. What creates a positioning context for absolutely positioned children?
4. How does z-index work with positioned elements?

Practice Tasks

1. Create a fixed header that changes style on scroll
2. Build a modal dialog with proper backdrop
3. Design a sticky table of contents sidebar
4. Practice creating tooltips and dropdown menus

🔗 What’s Next?

In Lesson 7, we’ll explore Responsive Design, learning how to create layouts that work beautifully on all devices using media queries, flexible grids, and mobile-first design principles.

---

Positioning is crucial for creating complex layouts and interactive components. Master these techniques to build professional user interfaces.