top / right / bottom / left

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

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

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

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

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

使用逻辑属性(Using logical properties)

¥Using logical properties

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

¥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, which map to either the left or right side based on the text direction:

<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 修饰符 根据当前文本方向有条件地应用特定样式。

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

¥Using a custom value

使用工具例如 inset-[<value>] and top-[<value>] 根据完全自定义的值设置 position：

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

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

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

这只是简写，用于 inset-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

前缀 inset,inset-x,inset-y,start,end,top,left,bottom, and right 工具 使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

@theme {
  --spacing: 1px; 
}

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