# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/top-right-bottom-left.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { CustomizingYourSpacingScale } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "top / right / bottom / left";
export const description = "Utilities for controlling the placement of positioned elements.";

<ApiTable
  rows={[
    { prefix: "inset", property: "inset" },
    { prefix: "inset-x", property: "inset-inline" },
    { prefix: "inset-y", property: "inset-block" },
    { prefix: "start", property: "inset-inline-start" },
    { prefix: "end", property: "inset-inline-end" },
    { prefix: "top", property: "top" },
    { prefix: "right", property: "right" },
    { prefix: "bottom", property: "bottom" },
    { prefix: "left", property: "left" },
  ].flatMap(({ prefix, property }) =>
    [
      ["<number>", "calc(var(--spacing) * <number>)"],
      ["<number>", "calc(var(--spacing) * -<number>)", true],
      ["<fraction>", "calc(<fraction> * 100%)"],
      ["<fraction>", "calc(<fraction> * -100%)", true],
      ["px", "1px"],
      ["px", "-1px", true],
      ["full", "100%"],
      ["full", "-100%", true],
      ["auto", "auto"],
      ["(<custom-property>)", "var(<custom-property>)"],
      ["[<value>]", "<value>"],
    ].map(([suffix, value, negative]) => [`${negative ? "-" : ""}${prefix}-${suffix}`, `${property}: ${value};`]),
  )}
/>

## Examples

### Basic example

Use `top-<number>`, `right-<number>`, `bottom-<number>`, `left-<number>`, and `inset-<number>` utilities like `top-0` and `bottom-4` to set the horizontal or vertical position of a [positioned element](/docs/position):

<Figure>

<Example>
  {
    <div className="grid grid-cols-3 grid-rows-3 place-items-center gap-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute top-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          01
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute inset-x-0 top-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          02
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute top-0 right-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          03
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute inset-y-0 left-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          04
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-purple-500 p-4">05</div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute inset-y-0 right-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          06
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute bottom-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          07
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute inset-x-0 bottom-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          08
        </div>
      </div>
      <div className="relative size-18 rounded-lg sm:size-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute right-0 bottom-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
          09
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-x-0,inset-y-0,inset-0,right-0,left-0,top-0,bottom-0] -->
<!-- Pin to top left corner -->
<div class="relative size-32 ...">
  <div class="absolute top-0 left-0 size-16 ...">01</div>
</div>

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

<!-- Pin to top right corner -->
<div class="relative size-32 ...">
  <div class="absolute top-0 right-0 size-16 ...">03</div>
</div>

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

<!-- Fill entire parent -->
<div class="relative size-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

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

<!-- Pin to bottom left corner -->
<div class="relative size-32 ...">
  <div class="absolute bottom-0 left-0 size-16 ...">07</div>
</div>

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

<!-- Pin to bottom right corner -->
<div class="relative size-32 ...">
  <div class="absolute right-0 bottom-0 size-16 ...">09</div>
</div>
```

</Figure>

### Using negative values

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

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="relative size-18 rounded-lg sm:h-32 sm:w-32">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="absolute -top-4 -left-4 flex items-center justify-center rounded-lg bg-purple-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:-left-4,-top-4] -->
<div class="relative size-32 ...">
  <div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>
```

</Figure>

### Using logical properties

Use `start-<number>` or `end-<number>` utilities like `start-0` and `end-4` to set the `inset-inline-start` and `inset-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="relative size-18 rounded-lg sm:size-32">
          <div className="absolute inset-0">
            <Stripes border className="h-full rounded-lg" />
          </div>
          <div className="absolute top-0 left-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
        </div>
      </div>
      <div className="flex flex-col items-end gap-y-4">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="relative size-18 rounded-lg sm:size-32">
          <div className="absolute inset-0">
            <Stripes border className="h-full rounded-lg" />
          </div>
          <div className="absolute top-0 right-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:start-0] -->
<div dir="ltr">
  <div class="relative size-32 ...">
    <div class="absolute start-0 top-0 size-14 ..."></div>
  </div>
  <div>
    <div dir="rtl">
      <div class="relative size-32 ...">
        <div class="absolute start-0 top-0 size-14 ..."></div>
      </div>
      <div></div>
    </div>
  </div>
</div>
```

</Figure>

For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

### Using a custom value

<UsingACustomValue utilities={["inset", "top"]} name="position" value="3px" variable="position" />

### Responsive design

<ResponsiveDesign
  properties={["inset", "inset-x", "inset-y", "start", "end", "top", "left", "bottom", "right"]}
  defaultClass="top-4"
  featuredClass="top-6"
/>

## Customizing your theme

<CustomizingYourSpacingScale
  utilities={["inset", "inset-x", "inset-y", "start", "end", "top", "left", "bottom", "right"]}
/>