Position utilities (relative, absolute, fixed) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's relative positioning

What happens when you apply relative class to a container in Tailwind CSS?

A The element is removed from the document flow and positioned relative to the viewport.

B The element becomes invisible but still takes up space.

C The element is fixed in place and does not move when scrolling.

D The element is positioned relative to its normal position, allowing <code>top</code>, <code>left</code>, <code>right</code>, and <code>bottom</code> to offset it.

💡 Hint

Think about how relative positioning shifts an element from where it normally sits.

Using relative in Tailwind sets position: relative; in CSS. This means the element stays in the normal flow but can be shifted using offset properties.

📝 Syntax

intermediate

Which Tailwind class correctly fixes an element to the top of the viewport?

Select the Tailwind class combination that fixes an element at the top of the viewport and spans full width.

A fixed top-0 left-0 w-full

B absolute top-0 left-0 w-full

C relative top-0 left-0 w-full

D sticky top-0 left-0 w-full

💡 Hint

Fixed position means the element stays visible even when scrolling.

The fixed class sets position: fixed;, which pins the element relative to the viewport. top-0 and left-0 place it at the top-left corner, and w-full makes it span the full width.

❓ rendering

advanced

Visual result of nested absolute positioning

Given this HTML and Tailwind CSS, what will you see in the browser?

<div class="relative w-64 h-64 bg-blue-200">
  <div class="absolute top-4 left-4 w-32 h-32 bg-red-400"></div>
</div>

Tailwind

<div class="relative w-64 h-64 bg-blue-200">
  <div class="absolute top-4 left-4 w-32 h-32 bg-red-400"></div>
</div>

A A blue square 16rem by 16rem with a smaller red square 8rem by 8rem inside, offset 1rem from top-left corner.

B A red square 8rem by 8rem with a smaller blue square inside it.

C Two overlapping blue squares with no red visible.

D Only a red square visible, filling the entire viewport.

💡 Hint

Remember that absolute positions relative to the nearest relative ancestor.

The outer div is relative with width and height 16rem (64 * 0.25rem). The inner div is absolute positioned 1rem (4 * 0.25rem) from top and left, sized 8rem (32 * 0.25rem), with a red background. So you see a big blue square with a smaller red square inside, offset from top-left.

❓ selector

advanced

Which Tailwind class combination causes an element to scroll with the page but stay visible at the top after scrolling past it?

Choose the correct Tailwind classes to make an element stick to the top of the viewport only after scrolling past it.

A absolute top-0

B sticky top-0

C fixed top-0

D relative top-0

💡 Hint

Sticky positioning acts like relative until a scroll threshold is passed.

The sticky class sets position: sticky;, which keeps the element in normal flow until the viewport scrolls past its position, then it sticks to the specified offset (here top-0).

❓ accessibility

expert

Accessibility concern with fixed positioned elements

When using fixed positioning in Tailwind to create a navigation bar, which accessibility issue should you be most careful about?

A Avoiding use of <code>aria-label</code> on fixed elements because it confuses screen readers.

B Making sure the fixed element uses <code>z-index: 0</code> to stay behind all content.

C Ensuring the fixed element does not cover important content and is keyboard accessible.

D Using fixed positioning only on images, never on interactive elements.

💡 Hint

Think about how fixed elements can block content and affect keyboard users.

Fixed elements stay visible and can cover page content. It's important they do not block important information and remain accessible via keyboard navigation. Proper ARIA roles and focus management help.