Top / Right / Bottom / Left

Basic usage

Placing a positioned element

Use the {top|right|bottom|left|inset}-0 utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.

Combined with Tailwind's padding and margin utilities, you'll probably find that these are all you need to precisely control absolutely positioned elements.

<!-- Pin to top left corner -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **left-0 top-0** h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **inset-x-0 top-0** h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **top-0 right-0** h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **inset-y-0 left-0** w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **inset-0** ...">05</div>
</div>

<!-- Span right edge -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **inset-y-0 right-0** w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **bottom-0 left-0** h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **inset-x-0 bottom-0** h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div className="relative h-32 w-32 ...">
  <div className="absolute **bottom-0 right-0** h-16 w-16 ...">09</div>
</div>

Using negative values

To use a negative top/right/bottom/left value, prefix the className name with a dash to convert it to a negative value.

<div className="relative h-32 w-32 ...">
  <div className="absolute h-14 w-14 **-left-4 -top-4** ..."></div>
</div>