zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

配置方式

包含ブロック内での要素の配置方式を設定します。

position で、オフセットの基準と通常フローへの残り方を選びます。relative は場所を保ったまま absolute 子要素の基準になり、absolute はフローから外れます。fixed はプレビューのビューポートに固定され、sticky はスクロール領域の中で端に張り付きます。

クラスと CSS の早見表

クラスの例期待される宣言
staticposition: static;
relativeposition: relative;
absoluteposition: absolute;
stickyposition: sticky;
fixedposition: fixed;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

通常フローに置く

static は通常フローに残ります。top-4 と left-4 のオフセットは意図的に無視されます。

通常フローに置く
HTML
<div class="wind-demo">
  <div class="wind-demo-frame w-64">
    <div class="wind-demo-tile static top-4 left-4">static ignores these offsets</div>
    <div class="wind-demo-tile">Normal-flow sibling</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.static {
  position: static;
}
.left-4 {
  left: 1rem;
}
.top-4 {
  top: 1rem;
}
.w-64 {
  width: 16rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "left-4",
        "static",
        "top-4",
        "w-64"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

近くの枠を基準にする

relative はフロー上の場所を保ち、absolute 子要素の基準になります。

近くの枠を基準にする
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="wind-demo-note">This box is the containing block.</div>
    <div class="wind-demo-tile absolute bottom-2 right-2">Pinned to this frame</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.bottom-2 {
  bottom: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "bottom-2",
        "h-36",
        "relative",
        "right-2",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

スクロール領域内で固定する

sticky は top-0 がスクロール領域の上端に達すると張り付き、包含ブロックの範囲内でその状態を保ちます。

スクロール領域内で固定する
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Scroll inside the panel to see the heading stick to its top edge.</p>
  <div class="wind-demo-frame h-36 overflow-y-auto">
    <div class="h-12 wind-demo-muted">Earlier content</div>
    <div class="sticky top-0 wind-demo-tile">Sticky section heading</div>
    <div class="h-24 wind-demo-tile">Long section content</div>
    <div class="h-24 wind-demo-muted">More content</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-muted {
  background: #eef1f4;
  color: #64758a;
  border: 1px solid #cbd3dc;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: 0;
}
.h-12 {
  height: 3rem;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.overflow-y-auto {
  overflow-y: auto;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-muted": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-12",
        "h-24",
        "h-36",
        "overflow-y-auto",
        "sticky",
        "top-0"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-muted { background: #eef1f4; color: #64758a; border: 1px solid #cbd3dc; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

プレビューのビューポートに固定する

fixed はスクロールパネルではなく iframe のビューポートを基準に bottom-2 と right-2 を使います。

プレビューのビューポートに固定する
HTML
<div class="wind-demo">
  <p class="wind-demo-note">The chip is fixed to this preview viewport. Scroll the panel if needed.</p>
  <div class="wind-demo-frame h-36 overflow-y-auto">
    <div class="h-24 wind-demo-muted">Scroll content</div>
    <div class="h-24 wind-demo-tile">More content</div>
  </div>
  <div class="fixed bottom-2 right-2 wind-demo-highlight">Viewport chip</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}

.wind-demo-muted {
  background: #eef1f4;
  color: #64758a;
  border: 1px solid #cbd3dc;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.fixed {
  position: fixed;
}
.bottom-2 {
  bottom: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.overflow-y-auto {
  overflow-y: auto;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true,
      "wind-demo-muted": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "bottom-2",
        "fixed",
        "h-24",
        "h-36",
        "overflow-y-auto",
        "right-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }
.wind-demo-muted { background: #eef1f4; color: #64758a; border: 1px solid #cbd3dc; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

任意値と名前付きの値

5 個のクラス名は固定で、値は付きません。top-4 などのオフセットは位置指定された箱だけを動かし、static は無視して、absolute 子要素の基準にもなりません。sticky には auto 以外の inset 閾値とスクロール領域が必要です。CSS では transform の祖先が fixed 子要素の包含ブロックになることもあります。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

absolute

フィールド値
カタログ識別子v1.absolute
クラスパターンabsolute
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位position (2)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティposition

受け入れる値

種類接尾辞出力される値
exactnull"absolute"

宣言テンプレート

プロパティ値の種類固定値
positionresolvednull

カタログの例

クラスの例期待される宣言
absoluteposition: absolute

fixed

フィールド値
カタログ識別子v1.fixed
クラスパターンfixed
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位position (2)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティposition

受け入れる値

種類接尾辞出力される値
exactnull"fixed"

宣言テンプレート

プロパティ値の種類固定値
positionresolvednull

カタログの例

クラスの例期待される宣言
fixedposition: fixed

relative

フィールド値
カタログ識別子v1.relative
クラスパターンrelative
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位position (2)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティposition

受け入れる値

種類接尾辞出力される値
exactnull"relative"

宣言テンプレート

プロパティ値の種類固定値
positionresolvednull

カタログの例

クラスの例期待される宣言
relativeposition: relative

static

フィールド値
カタログ識別子v1.static
クラスパターンstatic
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位position (2)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティposition

受け入れる値

種類接尾辞出力される値
exactnull"static"

宣言テンプレート

プロパティ値の種類固定値
positionresolvednull

カタログの例

クラスの例期待される宣言
staticposition: static

sticky

フィールド値
カタログ識別子v1.sticky
クラスパターンsticky
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位position (2)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティposition

受け入れる値

種類接尾辞出力される値
exactnull"sticky"

宣言テンプレート

プロパティ値の種類固定値
positionresolvednull

カタログの例

クラスの例期待される宣言
stickyposition: sticky

Revision History

作成更新