Top, right, bottom, left offsets in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What do the top, right, bottom, and left offsets control in CSS positioning?

They control how far an element is placed from the respective edges of its nearest positioned ancestor or the viewport if none is positioned.

beginner

How do you apply a top offset of 1rem using Tailwind CSS?

Use the class top-4 because Tailwind's spacing scale uses 1 unit = 0.25rem, so 4 units = 1rem.

beginner

Which CSS property must be set for top, right, bottom, or left offsets to work?

The element must have a position value other than static, like relative, absolute, or fixed.

beginner

In Tailwind, what does the class right-0 do?

It sets the element's right offset to 0, placing it flush against the right edge of its positioned ancestor.

intermediate

How can you set negative left offset in Tailwind CSS?

Use a negative class like <code>-left-4</code> to move the element 1rem to the left beyond its container.

Which Tailwind class sets an element 2rem from the top?

A top-1

B top-2

C top-4

D top-8

Tailwind spacing scale: 1 unit = 0.25rem, so 8 units = 2rem.

What must you add to an element for top/right/bottom/left offsets to take effect?

A display: block

B position: relative or absolute

C margin: auto

D float: left

Offsets only work if the element's position is relative, absolute, fixed, or sticky.

What does the Tailwind class -bottom-6 do?

A Moves element 1.5rem above its container

B Moves element 1.5rem below its container

C Moves element 6rem below its container

D Moves element 6rem above its container

Negative bottom offset moves the element upward by 1.5rem (6 * 0.25rem).

If an element has position: absolute and left-0, where will it be placed?

A At the right edge of its container

B At the left edge of the viewport always

C At the left edge of its nearest positioned ancestor

D Centered horizontally

Absolute positioning uses the nearest ancestor with position other than static as reference.

Which Tailwind class sets an element flush against the right edge?

A right-0

B left-0

C top-0

D bottom-0

right-0 sets the right offset to zero.

Explain how top, right, bottom, and left offsets work with positioned elements in Tailwind CSS.

Think about how CSS positioning and Tailwind spacing classes combine.

Describe how you would position an element 1rem from the top and 2rem from the right using Tailwind CSS.

Recall Tailwind spacing scale and position requirement.