Tailwind CSS Top / Right / Bottom / Left

Top / Right / Bottom / Left

用于控制定位元素的位置的功能类。

使用方法

使用 ​{top|right|bottom|left|inset}-0​ 功能类，将绝对定位的元素锚定在最近定位的父元素的任何边缘上。

结合 Tailwind 的 padding 和 margin 功能类，您可能会发现这些是所有的您需要的用来精确控制绝对定位元素的功能类。

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

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

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

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

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">5</div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">6</div>
</div>

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

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">8</div>
</div>

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

响应式

要仅在特定的断点处定位一个元素，请在任何现有的定位功能类前添加 ​{screen}:​ 前缀。例如，将 ​md:inset-y-0​ 类添加到一个元素上，就可以在中等尺寸及以上的屏幕上使用 ​inset-y-0​ 功能类。

<div class="relative h-32 ...">
  <div class="absolute inset-0 md:inset-y-0 ..."></div>
</div>

关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。

自定义

Top / Right / Bottom / Left scale

默认情况下，Tailwind 提供了 top/right/bottom/left/inset 实用程序，用于组合默认间距比例、​auto​、​full ​以及一些额外的小数值。

您可以通过编辑 ​tailwind.config.js​ 文件的 ​theme.inset​ 部分来更改、添加或删除这些。

  // tailwind.config.js
  module.exports = {
    theme: {
      inset: {
        '0': 0,
        // ...
       '64': '16rem',
       '1/5': '20%',
      }
    }
  }

负值

如果您想添加任何负的 top/right/bottom/left 类，在您的配置文件中的键前加上破折号。这些类与 Tailwind 的 [负外边距] (/docs/margin#negative-margins) 类的形式相同。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        inset: {
         '-16': '-4rem',
        }
      }
    }
  }

Tailwind 很聪明，当它看到前面的破折号时，就会生成像 -top-16 这样的类，而不是像您可能想象的那样生成 top--16。

变体

默认情况下， 针对 top, right, bottom, left, and inset 功能类，只生成 responsive 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​inset ​属性来控制为 top, right, bottom, left, and inset 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       inset: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 top, right, bottom, left, and inset 功能，您可以通过在配置文件的 ​corePlugins ​部分将 ​inset ​属性设置为 ​false ​来完全禁用它们：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     inset: false,
    }
  }