Bird
Raised Fist0
Tailwindmarkup~5 mins

Position utilities (relative, absolute, fixed) in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Position utilities help you place elements exactly where you want on the page. They control how elements move and stay in place.

You want to place a button at the bottom right corner of a box.
You need a menu to stay visible on the screen even when scrolling.
You want to layer images or text on top of each other.
You want to move an element slightly from its normal spot.
You want a header to stay fixed at the top while scrolling.
Syntax
Tailwind
relative
absolute
fixed

relative moves the element relative to its normal place.

absolute places the element relative to the nearest positioned parent.

fixed keeps the element fixed on the screen even when scrolling.

Examples
This sets the element as a reference point for absolutely positioned children.
Tailwind
<div class="relative">...</div>
This places the element at the top right corner of its nearest positioned parent.
Tailwind
<div class="absolute top-0 right-0">...</div>
This fixes the element at the bottom left corner of the screen, even when scrolling.
Tailwind
<div class="fixed bottom-0 left-0">...</div>
Sample Program

This example shows a white box with relative positioning. Inside it, two buttons are placed absolutely at the top right and bottom left corners. Also, a red box is fixed at the bottom left of the screen and stays visible when you scroll.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Position Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
  <section class="relative bg-white border border-gray-300 rounded-lg p-6 w-64 h-40">
    <p class="mb-4">This box is <strong>relative</strong> positioned.</p>
    <button class="absolute top-2 right-2 bg-blue-600 text-white px-3 py-1 rounded">Top Right</button>
    <button class="absolute bottom-2 left-2 bg-green-600 text-white px-3 py-1 rounded">Bottom Left</button>
  </section>

  <div class="fixed bottom-4 left-4 bg-red-600 text-white px-4 py-2 rounded shadow-lg">
    Fixed at bottom left of screen
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use relative on a parent to make absolute children position relative to it.

fixed elements stay visible on screen even when you scroll the page.

Combine position utilities with top, right, bottom, left classes to move elements.

Summary

Position utilities control where elements appear on the page.

relative moves elements from their normal spot.

absolute places elements relative to the nearest positioned parent.

fixed keeps elements visible on screen during scrolling.

Practice

(1/5)
1. Which Tailwind class makes an element stay fixed on the screen even when you scroll?
easy
A. fixed
B. relative
C. absolute
D. static

Solution

  1. Step 1: Understand the behavior of fixed

    The fixed class keeps an element in the same place on the screen, even when scrolling.

  2. Step 2: Compare with other position classes

    relative moves the element relative to its normal spot, absolute positions relative to nearest positioned parent, and static is default with no special positioning.

  3. Final Answer:

    fixed -> Option A

  4. Quick Check:

    Fixed position = fixed [OK]
Hint: Fixed means stays put on screen during scroll [OK]
Common Mistakes:
  • Confusing absolute with fixed
  • Thinking relative keeps element fixed
  • Assuming static affects position
2. Which Tailwind class should you add to a parent element to make its child with absolute positioning align relative to it?
easy
A. static
B. fixed
C. absolute
D. relative

Solution

  1. Step 1: Understand absolute positioning context

    An element with absolute positioning is placed relative to the nearest ancestor that has a position other than static.

  2. Step 2: Identify which position sets the context

    Setting the parent to relative makes it the reference for the child's absolute position.

  3. Final Answer:

    relative -> Option D

  4. Quick Check:

    Parent must be relative for child's absolute [OK]
Hint: Parent needs relative for child's absolute to work [OK]
Common Mistakes:
  • Using fixed on parent instead of relative
  • Not setting any position on parent
  • Using absolute on parent mistakenly
3. What will happen if you apply absolute top-0 left-0 to a child inside a parent with no position class in Tailwind?
medium
A. The child will be positioned at the top-left of the parent.
B. The child will be positioned at the top-left of the page (viewport).
C. The child will stay in its normal place without moving.
D. The child will be hidden because of missing parent position.

Solution

  1. Step 1: Check parent's position

    The parent has no position class, so it defaults to static.

  2. Step 2: Understand absolute positioning without positioned parent

    When no positioned parent exists, absolute positions relative to the page (viewport).

  3. Final Answer:

    The child will be positioned at the top-left of the page (viewport). -> Option B

  4. Quick Check:

    Absolute without positioned parent = viewport position [OK]
Hint: Absolute without relative parent = position relative to page [OK]
Common Mistakes:
  • Assuming child positions relative to parent without position
  • Thinking child stays in normal flow
  • Believing child gets hidden
4. You want a button to stay visible at the bottom right corner of the screen while scrolling. You add absolute bottom-0 right-0 to it, but it doesn't stay fixed. What is the fix?
medium
A. Remove all position classes from the button.
B. Add relative to the button's parent.
C. Change absolute to fixed on the button.
D. Add static to the button.

Solution

  1. Step 1: Understand difference between absolute and fixed

    absolute positions relative to nearest positioned parent and scrolls with page; fixed stays visible on screen during scroll.

  2. Step 2: Identify correct class for fixed position

    To keep the button visible at bottom right while scrolling, use fixed instead of absolute.

  3. Final Answer:

    Change absolute to fixed on the button. -> Option C

  4. Quick Check:

    Fixed = stays visible on scroll [OK]
Hint: Use fixed for always visible elements [OK]
Common Mistakes:
  • Using absolute expecting fixed behavior
  • Adding relative to parent instead of fixing button
  • Removing position classes without replacing
5. You have a div with relative class and inside it a span with absolute top-0 right-0. You want the span to stay fixed at the top right of the viewport instead. How do you change the classes?
hard
A. Change absolute on span to fixed and keep relative on div.
B. Change relative on div to fixed and keep absolute on span.
C. Remove all position classes from both elements.
D. Add fixed to both div and span.

Solution

  1. Step 1: Understand current setup

    The div is relative, so the span with absolute positions relative to it.

  2. Step 2: Change span to fixed for viewport positioning

    To position the span relative to the viewport (screen), it needs fixed instead of absolute. The parent can remain relative.

  3. Final Answer:

    Change absolute on span to fixed and keep relative on div. -> Option A

  4. Quick Check:

    Fixed on child = position relative to viewport [OK]
Hint: Use fixed on element to fix on viewport [OK]
Common Mistakes:
  • Changing parent to fixed instead of child
  • Keeping absolute on child expecting fixed behavior
  • Adding fixed to both elements unnecessarily