Position utilities (relative, absolute, fixed) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container positioned relative.

Tailwind

<div class="[1] bg-blue-200 p-4">
  <p>This box is relative.</p>
</div>

Drag options to blanks, or click blank then click option'

Astatic

Babsolute

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' or 'fixed' instead of 'relative'.

Using 'static' which is the default and does not allow positioning.

The relative class sets the element's position to relative, allowing absolutely positioned children to be placed relative to it.

2fill in blank

medium

Complete the code to position the box absolutely inside its relative parent.

Tailwind

<div class="relative bg-gray-100 p-6">
  <div class="[1] bg-red-400 p-2">
    Absolute box
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aabsolute

Brelative

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' on the child instead of 'absolute'.

Using 'fixed' which positions relative to the viewport.

The absolute class positions the element absolutely relative to the nearest positioned ancestor, which is the parent with relative.

3fill in blank

hard

Fix the error in the code to make the box fixed at the top right corner.

Tailwind

<div class="[1] top-0 right-0 bg-green-300 p-3">
  Fixed box
</div>

Drag options to blanks, or click blank then click option'

Aabsolute

Bstatic

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' which positions relative to the nearest positioned ancestor.

Using 'relative' or 'static' which do not fix the element on screen.

The fixed class positions the element relative to the viewport, so it stays at the top right corner even when scrolling.

4fill in blank

hard

Fill both blanks to position the child absolutely at the bottom left inside the relative parent.

Tailwind

<div class="[1] bg-yellow-100 p-5">
  <div class="[2] bottom-0 left-0 bg-yellow-400 p-2">
    Bottom left box
  </div>
</div>

Drag options to blanks, or click blank then click option'

Arelative

Babsolute

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' on child which positions relative to viewport.

Not setting parent to relative, so child absolute positions relative to body.

The parent needs relative positioning so the child with absolute can be placed at bottom left inside it.

5fill in blank

hard

Fill all three blanks to create a fixed header with relative container and absolute logo inside.

Tailwind

<header class="[1] bg-gray-800 text-white p-4">
  <div class="[2] max-w-7xl mx-auto">
    <div class="[3] top-0 left-0 p-2">
      Logo
    </div>
    <nav>
      Navigation
    </nav>
  </div>
</header>

Drag options to blanks, or click blank then click option'

Afixed

Brelative

Cabsolute

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'static' which does not position elements.

Mixing up relative and absolute classes.

The header is fixed to stay on top. Inside it, the container is relative so the logo can be absolute positioned at top left.