📦

【Tailwind和訳】LAYOUT/Position

2021/10/24に公開約3,500字

この記事について

この記事は、LAYOUT/Positionの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Position

要素が DOM にどのように配置されるかを制御するためのユーティリティ。

Class Properties
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;

Static

static は、ドキュメントの通常の流れに沿って要素を配置するために使用します。

オフセットは無視され、要素は絶対的に配置された子の位置参照としては機能しません。

<div class="static ...">
  <p>Static parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

Relative

ドキュメントの通常の流れに沿って要素を配置するには、relative を使用します。

オフセットは、要素の通常の位置から相対的に計算され、要素は絶対的に配置された子の位置参照として機能します。

<div class="relative ...">
  <p>Relative parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

Absolute

absolute を使用して、ドキュメントの通常の流れから外れた位置に要素を配置すると、隣接する要素はその要素が存在しないかのように動作します。

オフセットは、static 以外の位置を持つ最も近い親を基準に計算され、その要素は、絶対的に配置された他の子の位置参照として機能します。

<div class="static ...">
  <!-- Static parent -->
  <div class="static ..."><p>Static child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>
  <!-- Static parent -->
  <div class="absolute ..."><p>Absolute child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>
</div>

Fixed

ブラウザのウィンドウを基準にして要素を配置するには、fixed を使用します。

オフセットはビューポートを基準に計算され、要素は絶対的に配置された子の位置参照として機能します。

Image from Gyazo

<div>
  <div class="fixed ...">Fixed child</div>

  Scroll me! Lorem ipsum...
</div>

Sticky

sticky を使って、ある要素が指定されたしきい値を超えるまでは relative な位置に置き、親が画面外に出るまでは固定的な位置として扱うことができます。

オフセットは、要素の通常の位置を基準にして計算され、要素は絶対的に配置された子の位置参照として機能します。

Image from Gyazo

<div>
  <div class="sticky top-0 ...">Sticky Heading 1</div>
  <p class="py-4">Quisque cursus...</p>
</div>
<div>
  <div class="sticky top-0 ...">Sticky Heading 2</div>
  <p class="py-4">Integer lacinia...</p>
</div>
<div>
  <div class="sticky top-0 ...">Sticky Heading 3</div>
  <p class="py-4">Nullam mauris...</p>
</div>
<!-- etc. -->

Responsive

要素が特定のブレークポイントにのみ配置される方法を変更するには、既存の位置ユーティリティに {screen}: プレフィックスを追加します。たとえば、クラス md:absolute を要素に追加すると、中程度の画面サイズ以上で absolute ユーティリティが適用されます。

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

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

Customizing

Variants

デフォルトでは、ポジションユーティリティのためにレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある position プロパティを変更することで、ポジションユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定は hover と focus のバリアントも生成します。

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

無効化

プロジェクトで位置ユーティリティを使用する予定がない場合は、構成ファイルの corePlugins セクションで position プロパティを false に設定することで、それらを完全に無効にすることができます。

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

Discussion

ログインするとコメントできます