❮ Previous

Usage

  • Apply positioning techniques in real-world interface components and layouts.

  • Why This Lesson Matters

    By now, you understand:

    • Position types

    • Offsets

    • Insets

    • Z-index

    • Layering

    But knowing utilities is not enough.

    Real-world UI success depends on:

    • Knowing when to use positioning

    • Knowing how to combine utilities

    • Knowing what NOT to do

    In Tailwind CSS, positioning is powerful—but misused more than almost any other feature.

    Sticky Headers

    What Is a Sticky Header ?

    A sticky header:

    • Scrolls normally at first

    • “Sticks” to the top after reaching a scroll point

    • Remains visible while content scrolls underneath

    This is ideal for:

    • Navigation bars

    • Section headers

    • Table headers

Sticky Header

Keeps the navigation header visible at the top while scrolling. 

<header class="sticky top-0 z-30 bg-white shadow">
  <nav class="p-4">
    Navbar
  </nav>
</header>

  • Why this works:

    • sticky enables scroll-aware behavior

    • top-0 defines when sticking begins

    • z-30 keeps header above content

    • bg-white prevents transparency issues

Sticky Section Header

Keeps the section header fixed at the top inside a scrollable container. 

<div class="h-64 overflow-y-auto">
  <h2 class="sticky top-0 bg-gray-100 p-2">
    Section Title
  </h2>
  <p>Scrollable content…</p>
</div>

  • Sticky will fail if:

    • Parent has overflow: hidden unintentionally

    • No offset (top, bottom) is defined

      Floating Elements 

      What Are Floating Elements ?

      Floating elements:

      • Sit above normal content

      • Are independent of layout flow

      • Often stay visible or overlap content

      Used for:

      • Floating action buttons

      • Chat widgets

      • Tooltips

      • Toast notifications

      • Back-to-top buttons

    Floating Action Button

    Creates a floating button fixed at the bottom-right of the screen. 

    <button class="fixed bottom-4 right-4 z-40 bg-blue-600 text-white px-4 py-2 rounded-full shadow-lg">
  +
</button>

    • Key points:

      • fixed locks to viewport

      • Offsets define position

      • z-40 keeps it above content

      • Shadow communicates elevation

    Floating Badge

    Positions a badge inside a component using absolute positioning. 

    <div class="relative p-6 border rounded">
  <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
    New
  </span>
  <p>Card content</p>
</div>

    • This pattern is used for:

      • Badges

      • Status labels

      • Close buttons

      Parent must be relative.

    Modal Overlay Layout

    Creates a modal centered above a dark overlay using fixed positioning and z-index. 

    <div class="fixed inset-0 bg-black/50 z-40"></div>

<div class="fixed inset-0 z-50 flex items-center justify-center">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    Modal Content
  </div>
</div>

    • Why this pattern is correct:

      • Overlay blocks background

      • Modal stays centered

      • Z-index layering is clear

      • Works on all screen sizes

    Dropdown Menu

    Creates a dropdown menu positioned below a button. 

    <div class="relative">
  <button class="px-4 py-2">Menu</button>

  <ul class="absolute right-0 mt-2 z-20 bg-white shadow rounded">
    <li class="px-4 py-2">Item 1</li>
    <li class="px-4 py-2">Item 2</li>
  </ul>
</div>

    • Dropdowns fail when:

      • Parent isn’t relative

      • z-index is missing

      • Overflow clips the menu

        Common Positioning Mistakes 

        Mistake 1: Using Absolute for Layout

        <!-- BAD -->

        <div class="absolute left-0 top-0">

          Main content

        </div>

        Why it’s wrong:

        • Breaks responsiveness

        • Collapses layout

        • Causes overlap issues

        Use flex or grid for layout, positioning only for overlays.

        Mistake 2: Forgetting Position on Parent

        <span class="absolute top-0 right-0">Badge</span>

        Result:

        • Badge attaches to viewport, not component

        Always anchor with:

        <div class="relative">


        Mistake 3: Offsets Without Position


        <div class="top-0 left-0">Does nothing</div>

        Offsets only work with positioned elements.

        Mistake 4: Random Z-Index Values

        <div class="z-[9999]">

        Why it’s bad:

        • Hard to debug

        • Breaks layering logic

        • Signals poor system design

        Use consistent z-index levels.

        Mistake 5: Overusing Fixed Position

        Too many fixed elements:

        • Block content

        • Break mobile UX

        • Reduce accessibility

        Use fixed only when persistent visibility is required.

        Positioning Best Practices 

        Follow this order of thinking:

        1. Can flex or grid solve this ?

        2. Does this element need to overlap ?

        3. Should it scroll or stay fixed ?

        4. What should it be relative to ?

        5. Does it need a z-index ?

        Positioning should be intentional, not reactive.

        Accessibility Considerations in Usage

        Positioned elements can:

        • Hide focus rings

        • Trap keyboard navigation

        • Block screen reader flow

        Ensure:

        • Modals trap focus

        • Floating buttons are reachable

        • Sticky headers don’t cover content

        • Overlays don’t hide active elements

        Positioning affects interaction, not just visuals.

      ❮ Previous