Position utilities (relative, absolute, fixed) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the relative position utility do in Tailwind CSS?

It sets the element's position to relative, allowing you to move it using top, right, bottom, or left without removing it from the normal page flow.

beginner

How does absolute positioning behave in Tailwind CSS?

It removes the element from the normal flow and positions it relative to the nearest positioned ancestor (one with relative, absolute, or fixed).

beginner

What is the effect of the fixed position utility in Tailwind CSS?

It fixes the element relative to the browser window, so it stays in the same place even when you scroll the page.

intermediate

Which Tailwind utility class would you use to move an element 1rem down from its normal position?

Use relative to set position, then top-4 to move it down by 1rem (since 4 = 1rem in Tailwind spacing scale).

intermediate

Why is it important to have a positioned ancestor when using absolute positioning?

Because an absolutely positioned element is placed relative to the nearest ancestor that has a position other than static (like relative or fixed). Without it, it positions relative to the page.

Which Tailwind class sets an element to be positioned relative to its normal spot?

A fixed

B absolute

C relative

D static

The relative class sets the element's position to relative, allowing offset adjustments.

If you want an element to stay visible in the same spot when scrolling, which Tailwind class do you use?

A fixed

B sticky

C relative

D absolute

The fixed class fixes the element relative to the viewport, so it doesn't move on scroll.

An element with absolute positioning will be placed relative to:

A The nearest ancestor with position relative, absolute, or fixed

B The body element always

C The first child element

D The viewport only

Absolute positioning uses the nearest positioned ancestor as reference.

Which Tailwind class removes an element from the normal document flow?

A relative

B block

C static

D absolute

Absolute positioning removes the element from normal flow, allowing free placement.

What happens if you use absolute positioning but no ancestor has a position set?

A Element positions relative to the viewport

B Element positions relative to the page (html element)

C Element stays in normal flow

D Element is hidden

Without a positioned ancestor, absolute positions relative to the page root.

Explain how the relative, absolute, and fixed position utilities work in Tailwind CSS and when you might use each.

Think about how each affects the element's position and page flow.

Describe why setting a positioned ancestor is important when using absolute positioning in Tailwind CSS.

Consider what happens if no ancestor has position set.