Aller au contenu

Top right bottom left

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.";

[ ["", "calc(var(--spacing) * )"], ["", "calc(var(--spacing) * -)", true], ["", "calc( * 100%)"], ["", "calc( * -100%)", true], ["px", "1px"], ["px", "-1px", true], ["full", "100%"], ["full", "-100%", true], ["auto", "auto"], ["()", "var()"], ["[]", ""], ].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:

{
01
02
03
04
05
06
07
08
09
} 
<!-- [!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>

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:

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

Using logical properties

Use inset-s-<number> or inset-e-<number> utilities like inset-s-0 and inset-e-4 to set the inset-inline-start and inset-inline-end logical properties, which map to either the left or right side based on the text direction:

{

Left-to-right

Right-to-left

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

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

Using a custom value

Responsive design

Customizing your theme