position

ドキュメント内の要素の配置を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`static`	`position: static;`
`fixed`	`position: fixed;`
`absolute`	`position: absolute;`
`relative`	`position: relative;`
`sticky`	`position: sticky;`

static

position: static;

fixed

position: fixed;

absolute

position: absolute;

relative

position: relative;

sticky

position: sticky;

例

要素を静的に配置する

static ユーティリティを使用して、ドキュメントの通常のフローに従って要素を配置します。

静的な親

絶対的な子

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

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

要素を相対的に配置する

relative ユーティリティを使用して、ドキュメントの通常のフローに従って要素を配置します。

相対的な親

絶対的な子

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

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

要素を絶対的に配置する

absolute ユーティリティを使用して、ドキュメントの通常のフロー外に要素を配置し、隣接する要素がその要素が存在しないかのように動作するようにします。

静的位置指定の場合

相対的な親

静的な親

静的な子要素？

静的な兄弟要素

絶対位置指定の場合

相対的な親

静的な親

絶対的な子

静的な兄弟要素

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

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

要素を固定配置する

fixed ユーティリティを使用して、要素をブラウザウィンドウに対して相対的に配置します。

この要素をスクロールして、固定配置の動作を確認してください。

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

要素を粘着配置する

sticky ユーティリティを使用して、要素を指定された閾値を超えるまで relative として配置し、その後、親要素が画面外になるまで fixed として扱います。

この要素をスクロールして、粘着配置の動作を確認してください。

アンドリュー・アルフレッド

アイシャ・ヒューストン

アンナ・ホワイト

アンディ・フリント

ボブ・アルフレッド

ビアンカ・ヒューストン

ブリアンナ・ホワイト

バート・フリント

コルトン・アルフレッド

シンシア・ヒューストン

シャイアン・ホワイト

チャーリー・フリント

<div>
  <div>
    <div class="sticky top-0 ...">A</div>
    <div>
      <div>
        <img src="/img/andrew.jpg" />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="/img/aisha.jpg" />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        <img src="/img/bob.jpg" />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>

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

レスポンシブデザイン

プレフィックスa position ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。

<div class="relative md:absolute ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

このページについて