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>; |
inset-s-<number> | inset-inline-start: calc(var(--spacing) * <number>); |
-inset-s-<number> | inset-inline-start: calc(var(--spacing) * -<number>); |
inset-s-<fraction> | inset-inline-start: calc(<fraction> * 100%); |
-inset-s-<fraction> | inset-inline-start: calc(<fraction> * -100%); |
inset-s-px | inset-inline-start: 1px; |
-inset-s-px | inset-inline-start: -1px; |
inset-s-full | inset-inline-start: 100%; |
-inset-s-full | inset-inline-start: -100%; |
inset-s-auto | inset-inline-start: auto; |
inset-s-(<custom-property>) | inset-inline-start: var(<custom-property>); |
inset-s-[<value>] | inset-inline-start: <value>; |
inset-e-<number> | inset-inline-end: calc(var(--spacing) * <number>); |
-inset-e-<number> | inset-inline-end: calc(var(--spacing) * -<number>); |
inset-e-<fraction> | inset-inline-end: calc(<fraction> * 100%); |
-inset-e-<fraction> | inset-inline-end: calc(<fraction> * -100%); |
inset-e-px | inset-inline-end: 1px; |
-inset-e-px | inset-inline-end: -1px; |
inset-e-full | inset-inline-end: 100%; |
-inset-e-full | inset-inline-end: -100%; |
inset-e-auto | inset-inline-end: auto; |
inset-e-(<custom-property>) | inset-inline-end: var(<custom-property>); |
inset-e-[<value>] | inset-inline-end: <value>; |
inset-bs-<number> | inset-block-start: calc(var(--spacing) * <number>); |
-inset-bs-<number> | inset-block-start: calc(var(--spacing) * -<number>); |
inset-bs-<fraction> | inset-block-start: calc(<fraction> * 100%); |
-inset-bs-<fraction> | inset-block-start: calc(<fraction> * -100%); |
inset-bs-px | inset-block-start: 1px; |
-inset-bs-px | inset-block-start: -1px; |
inset-bs-full | inset-block-start: 100%; |
-inset-bs-full | inset-block-start: -100%; |
inset-bs-auto | inset-block-start: auto; |
inset-bs-(<custom-property>) | inset-block-start: var(<custom-property>); |
inset-bs-[<value>] | inset-block-start: <value>; |
inset-be-<number> | inset-block-end: calc(var(--spacing) * <number>); |
-inset-be-<number> | inset-block-end: calc(var(--spacing) * -<number>); |
inset-be-<fraction> | inset-block-end: calc(<fraction> * 100%); |
-inset-be-<fraction> | inset-block-end: calc(<fraction> * -100%); |
inset-be-px | inset-block-end: 1px; |
-inset-be-px | inset-block-end: -1px; |
inset-be-full | inset-block-end: 100%; |
-inset-be-full | inset-block-end: -100%; |
inset-be-auto | inset-block-end: auto; |
inset-be-(<custom-property>) | inset-block-end: var(<custom-property>); |
inset-be-[<value>] | inset-block-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）设置定位元素的水平或垂直位置：
01
02
03
04
05
06
07
08
09
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>使用负值
要使用负的 top/right/bottom/left 值，在类名前面加上短横线即可转换为负值：
html
<!-- [!code classes:-left-4,-top-4] -->
<div class="relative size-32 ...">
<div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>使用逻辑属性
使用 inset-s-<number> 或 inset-e-<number> 等工具类（如 inset-s-0 和 inset-e-4）设置 inset-inline-start 和 inset-inline-end 逻辑属性，它们会根据文本方向映射到左侧或右侧：
Left-to-right
Right-to-left
html
<!-- [!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>若要更精细地控制，还可以使用 LTR 和 RTL 修饰符，根据当前文本方向有条件地应用特定样式。
使用自定义值
使用 inset-[<value>] 和 top-[<value>] 等工具类，根据完全自定义的值设置位置：
html
<div class="inset-[3px] ...">
<!-- ... -->
</div>对于 CSS 变量，也可以使用 inset-(<custom-property>) 语法：
html
<div class="inset-(--my-position) ...">
<!-- ... -->
</div>这只是 inset-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体作为 inset、inset-x、inset-y、inset-s、inset-e、inset-bs、inset-be、top、left、bottom 和 right 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：
html
<div class="top-4 md:top-6 ...">
<!-- ... -->
</div>了解如何使用变体，请参阅变体文档。
自定义主题
inset-<number>、inset-x-<number>、inset-y-<number>、inset-s-<number>、inset-e-<number>、inset-bs-<number>、inset-be-<number>、top-<number>、left-<number>、bottom-<number> 和 right-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：
css
@theme {
--spacing: 1px;
}了解如何自定义间距比例，请参阅主题变量文档。