top / right / bottom / left

控制定位元素放置位置的实用工具。

快速参考

类	样式
`inset-<number>`	`inset: calc(var(--spacing) * <number>);`
`-inset-<number>`	`inset: calc(var(--spacing) * -<number>);`
`inset-<fraction>`	`inset: calc(<fraction> * 100%);`
`-inset-<fraction>`	`inset: calc(<fraction> * -100%);`
`inset-px`	`inset: 1px;`
`-inset-px`	`inset: -1px;`
`inset-full`	`inset: 100%;`
`-inset-full`	`inset: -100%;`
`inset-auto`	`inset: auto;`
`inset-(<custom-property>)`	`inset: var(<custom-property>);`
`inset-[<value>]`	`inset: <value>;`
`inset-x-<number>`	`inset-inline: calc(var(--spacing) * <number>);`
`-inset-x-<number>`	`inset-inline: calc(var(--spacing) * -<number>);`
`inset-x-<fraction>`	`inset-inline: calc(<fraction> * 100%);`
`-inset-x-<fraction>`	`inset-inline: calc(<fraction> * -100%);`
`inset-x-px`	`inset-inline: 1px;`
`-inset-x-px`	`inset-inline: -1px;`
`inset-x-full`	`inset-inline: 100%;`
`-inset-x-full`	`inset-inline: -100%;`
`inset-x-auto`	`inset-inline: auto;`
`inset-x-(<custom-property>)`	`inset-inline: var(<custom-property>);`
`inset-x-[<value>]`	`inset-inline: <value>;`
`inset-y-<number>`	`inset-block: calc(var(--spacing) * <number>);`
`-inset-y-<number>`	`inset-block: calc(var(--spacing) * -<number>);`
`inset-y-<fraction>`	`inset-block: calc(<fraction> * 100%);`
`-inset-y-<fraction>`	`inset-block: calc(<fraction> * -100%);`
`inset-y-px`	`inset-block: 1px;`
`-inset-y-px`	`inset-block: -1px;`
`inset-y-full`	`inset-block: 100%;`
`-inset-y-full`	`inset-block: -100%;`
`inset-y-auto`	`inset-block: auto;`
`inset-y-(<custom-property>)`	`inset-block: var(<custom-property>);`
`inset-y-[<value>]`	`inset-block: <value>;`
`start-<number>`	`inset-inline-start: calc(var(--spacing) * <number>);`
`-start-<number>`	`inset-inline-start: calc(var(--spacing) * -<number>);`
`start-<fraction>`	`inset-inline-start: calc(<fraction> * 100%);`
`-start-<fraction>`	`inset-inline-start: calc(<fraction> * -100%);`
`start-px`	`inset-inline-start: 1px;`
`-start-px`	`inset-inline-start: -1px;`
`start-full`	`inset-inline-start: 100%;`
`-start-full`	`inset-inline-start: -100%;`
`start-auto`	`inset-inline-start: auto;`
`start-(<custom-property>)`	`inset-inline-start: var(<custom-property>);`
`start-[<value>]`	`inset-inline-start: <value>;`
`end-<number>`	`inset-inline-end: calc(var(--spacing) * <number>);`
`-end-<number>`	`inset-inline-end: calc(var(--spacing) * -<number>);`
`end-<fraction>`	`inset-inline-end: calc(<fraction> * 100%);`
`-end-<fraction>`	`inset-inline-end: calc(<fraction> * -100%);`
`end-px`	`inset-inline-end: 1px;`
`-end-px`	`inset-inline-end: -1px;`
`end-full`	`inset-inline-end: 100%;`
`-end-full`	`inset-inline-end: -100%;`
`end-auto`	`inset-inline-end: auto;`
`end-(<custom-property>)`	`inset-inline-end: var(<custom-property>);`
`end-[<value>]`	`inset-inline-end: <value>;`
`top-<number>`	`top: calc(var(--spacing) * <number>);`
`-top-<number>`	`top: calc(var(--spacing) * -<number>);`
`top-<fraction>`	`top: calc(<fraction> * 100%);`
`-top-<fraction>`	`top: calc(<fraction> * -100%);`
`top-px`	`top: 1px;`
`-top-px`	`top: -1px;`
`top-full`	`top: 100%;`
`-top-full`	`top: -100%;`
`top-auto`	`top: auto;`
`top-(<custom-property>)`	`top: var(<custom-property>);`
`top-[<value>]`	`top: <value>;`
`right-<number>`	`right: calc(var(--spacing) * <number>);`
`-right-<number>`	`right: calc(var(--spacing) * -<number>);`
`right-<fraction>`	`right: calc(<fraction> * 100%);`
`-right-<fraction>`	`right: calc(<fraction> * -100%);`
`right-px`	`right: 1px;`
`-right-px`	`right: -1px;`
`right-full`	`right: 100%;`
`-right-full`	`right: -100%;`
`right-auto`	`right: auto;`
`right-(<custom-property>)`	`right: var(<custom-property>);`
`right-[<value>]`	`right: <value>;`
`bottom-<number>`	`bottom: calc(var(--spacing) * <number>);`
`-bottom-<number>`	`bottom: calc(var(--spacing) * -<number>);`
`bottom-<fraction>`	`bottom: calc(<fraction> * 100%);`
`-bottom-<fraction>`	`bottom: calc(<fraction> * -100%);`
`bottom-px`	`bottom: 1px;`
`-bottom-px`	`bottom: -1px;`
`bottom-full`	`bottom: 100%;`
`-bottom-full`	`bottom: -100%;`
`bottom-auto`	`bottom: auto;`
`bottom-(<custom-property>)`	`bottom: var(<custom-property>);`
`bottom-[<value>]`	`bottom: <value>;`
`left-<number>`	`left: calc(var(--spacing) * <number>);`
`-left-<number>`	`left: calc(var(--spacing) * -<number>);`
`left-<fraction>`	`left: calc(<fraction> * 100%);`
`-left-<fraction>`	`left: calc(<fraction> * -100%);`
`left-px`	`left: 1px;`
`-left-px`	`left: -1px;`
`left-full`	`left: 100%;`
`-left-full`	`left: -100%;`
`left-auto`	`left: auto;`
`left-(<custom-property>)`	`left: var(<custom-property>);`
`left-[<value>]`	`left: <value>;`

示例

基本示例

使用 top-<number>、right-<number>、bottom-<number>、left-<number> 和 inset-<number> 实用工具（如 top-0 和 bottom-4）来设置定位元素的水平或垂直位置：

<!-- 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>

使用负值

要使用负的 top/right/bottom/left 值，请在类名前面加上一个短横线，将其转换为负值：

<div class="relative size-32 ...">
  <div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>

使用逻辑属性

使用 start-<number> 或 end-<number> 实用工具（如 start-0 和 end-4）来设置 inset-inline-start 和 inset-inline-end 逻辑属性，它们根据文本方向映射到左侧或右侧：

Left-to-right

Right-to-left

<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>

为了获得更精细的控制，您还可以使用 LTR 和 RTL 修饰符根据当前的文本方向有条件地应用特定的样式。

使用自定义值

使用 inset-[<value>] 和 top-[<value>] 等实用工具，根据完全自定义的值设置 position：

<div class="inset-[3px] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 inset-(<custom-property>) 语法：

<div class="inset-(--my-position) ...">
  <!-- ... -->
</div>

这只是 inset-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

使用断点变体（例如 md:）作为 inset、inset-x、inset-y、start、end、top、left、bottom 和 right 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<div class="top-4 md:top-6 ...">
  <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。

自定义您的主题

inset-<number>、inset-x-<number>、inset-y-<number>、start-<number>、end-<number>、top-<number>、left-<number>、bottom-<number> 和 right-<number> 实用工具由 --spacing 主题变量驱动，该变量可以在您自己的主题中进行自定义：

@theme {
  --spacing: 1px;
}

在主题变量文档中了解更多关于自定义间距比例的信息。

position

控制元素在文档中如何定位的实用工具。

visibility

控制元素可见性的实用工具。